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


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

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023