Тег select

Тег 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>

:

Смотрите также

  • атрибут selected,
    который задает выбранный по умолчанию пункт списка
  • тег optgroup,
    который группирует пункты списка
  • тег datalist,
    который создает выпадающий список