Тег select
создает выпадающий список
для использования в HTML формах.
Отдельный пункт списка должен храниться в
теге option
.
Атрибуты
Атрибут | Описание |
---|---|
multiple |
Наличие данного атрибута создает мультиселект -
выпадающий список, в котором можно выбрать несколько пунктов, зажав
клавишу контрол (Ctrl) или выделив их мышкой.
Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple="multiple">. |
name |
Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают - в PHP придут данные того поля ввода, которое ниже в HTML коде. |
Пример
Давайте посмотрим, как работает выпадающий список:
<select>
<option>Москва</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример
Давайте ширину выпадающего списка сделаем
равной ширине самого большого элемента (если
она не будет явно указана с помощью CSS свойства
width
):
<select>
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Выбор по умолчанию
А теперь давайте попробуем выбрать по умолчанию
город Минск. Сделаем это с помощью атрибута
selected
:
<select>
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Мультиселект
Давайте теперь превратим обычный select в
мультиселект с помощью атрибута multiple
.
Для этого зажмем клавишу контрол (ctrl)
и, не отпуская ее, можем выбрать несколько
пунктов выпадающего списка. Или же просто
выделим мышкой несколько пунктов (зажмием
левую кнопку и выделяем).
<select multiple name="city[]">
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Обратите внимание на то, что имя селекта, заданное в атрибуте name
,
должно быть с квадратными скобками в конце. Это нужно для того, чтобы в PHP
приходили все выбранные значения (иначе придет только одно - последнее).
Пример . Несколько значений по умолчанию в мультиселекте
А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:
<select multiple name="city[]">
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option selected>Лондон</option>
</select>
: