Выпадающий список на странице. Тег <select>
- 25 января 2023
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023