Выпадающие (раскрывающиеся) списки очень часто используются для экономии места, когда нужно разместить
много пунктов списка компактно. Такие списки позволяют выбирать один или несколько из предложенных вариантов.
Они очень удобны для использования, но если планируется отправлять данные при выборе на сервер, то нужно
использовать специальный скрипт. А это - тема для другого урока.
Итак, научимся делать выпадающий список на примере навигации по нашему сайту. Поскольку раскрывающийся
список - это форма, используем для этого теги формы и некоторые специальные теги:
Результат:
Рассмотрим все элементы этого кода:
<select>...</select> - это контейнер, в который мы
должны заключить наше поле со списком;
контейнер <form action="file.php" method="get">...</form> "говорит"
о том, что наше поле со списком - это форма, данные из которой будут обрабатываться обработчиком, адрес
которого в этой же папке - file.php, а передача данных будет осуществляться открыто, то есть методом get;
name="linksNav" - уникальное имя поля со списком, нужно для идентификации обработчиком;
value="ссылка" - значение переменной (переменная задаётся в значении атрибута name тега select), которое будет передано на сервер;
size="1" - число строк списка, которое мы видим; если указать больше, то
список будет открыт именно на это число строк, если написать 7, то список не будет разворачиваться, так как
все строки будут на виду;
<option>...</option> - это контейнер, в который помещается
каждый элемент списка;
selected - используется, чтобы определить, какой пункт из всех в списке будет выделен;
У тегов select и option имеется ряд атрибутов, которые определяют свойсва и внешний вид создаваемого
поля со списком, часть из них были рассмотрены выше. Есть 2 варианта формы полей со списками:
когда можно выбрать только одну строку из списка, как в нашем примере выше,
когда, удерживая Ctrl или Shift можно выбрать несколько вариантов, которые и будут отправлены на сервер.
За это отвечает атрибут тега select - multiple (используется без значений).
Кроме того, внутри списка вы можете разбить элементы на несколько групп и у каждой из них будет свой
заголовок, выделенный другим шрифтом. Для этого несколько пунктов списка, относящихся к одной группе, заключают
в контейнер <optgroup>...</optgroup>, в открывающем теге которого
нужно прописать атрибут label, в качестве параметра которого вводится желаемое название группы. Например, так:
Результат:
В заключение добавлю, что, чтобы можно было пользоваться нашим списком, нужна не только программа-обработчик, но и
кнопка, кликнув по которой мы отправим данные на сервер или перейдём на нужную нам страницу. Этобу будет посвящен
отдельный урок.
