Выпадающий список на странице. Тег <select>

Тег <select> используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.

Синтаксис тега <select>

<select>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

Спецификация HTML

Тег <select> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <select> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Создание выпадающего списка с четырьмя вариантами выбора:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Создание списка с несколькими вариантами выбора и возможностью выбрать несколько опций, удерживая клавишу Shift или Ctrl при клике на опции:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Для чего использовать тег <select>

• Для создания выпадающего списка, в котором пользователь может выбирать один или несколько вариантов ответа.
• Тег может использоваться в формах для выбора страны, города, языка, типа товара и других параметров, а также для выбора опций из меню навигации на сайте.

Атрибуты тега <select>

• autocomplete — подсказка для функции автозаполнения формы;
• disabled — делает элемент неактивным;
• form — связывает список с формой;
• multiple — позволяет выбрать несколько опций;
• name — задает имя элемента, которое будет отправляться на сервер;
• required — делает элемент обязательным для заполнения;
• size — задает количество строк в списке.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <select> не может использоваться внутри элементов <button>, <datalist> и <progress>.

Нюансы

• Все опции списка должны быть обернуты в тег <option>.
• Атрибуты value в тегах <option> могут быть использованы для отправки значений на сервер.

Поддержка браузерами

Тег <select> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативными тегами для <select> являются теги <input> и <datalist>.

Чем заменить этот тег

Если нужно предоставить пользователю возможность ввода текста в список, можно использовать тег <datalist> вместо <select>.

Актуальность

Тег <select> является актуальным и поддерживается всеми современными браузерами.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.