ТЕГИ <SELECT>, <OPTION> и <OPTGROUP>
Тег <select> представляет собой меню опций. Это меню может быть как выпадающим с возможностью выбора одной опции, так и статичным с возможностью выбора нескольких опций. Тег <option> используется для обозначения опции внутри тега <select>. Тег <optgroup> позволяет группировать эти опции.
Поддержка браузеров
Синтаксис
<select>
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</select>
Синтаксис с использованием <optgroup>:
<select>
<optgroup label="Группа 1">
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
</optgroup>
<optgroup label="Группа 1">
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</optgroup>
</select>
Атрибуты
Атрибуты тега <select>
| Атрибут | Описание |
|---|---|
| autofocus | Указывает на то, что элемент должен автоматически получать фокус при загрузке страницы. Этот атрибут может иметь только один элемент на странице. |
| disabled | Указывает на то, что элемент отключен и пользователь не может с ним взаимодейтсвовать. |
| form | Указывает к какой форме относится элемент. Значением атрибута должен быть id формы из того же документа. Этот атрибут позволяет размещать элементы формы не только внутри неё, но и в любом месте на странице. |
| multiple | Указывает на то, что возможен выбор нескольких опций из списка. |
| name | Используется для указания имени элемента. |
| required | Указывает на то, что пользователь должен выбрать значение для того чтобы отправить форму. |
| size | Если данный атрибут указан, то элемент будет представлен как список опций. Значение атрибута указывает на количество опций, которые видны сразу. |
Тег <select> поддерживает глобальные атрибуты.
Атрибуты тега <option>
| Атрибут | Описание |
|---|---|
| disabled | Указывает на то, что опция отключена и пользователь не может с ней взаимодейтсвовать. |
| label | Испольуется для создания ярлыка отображающего описание опции. Если ярлык есть, то текст опции будет таким, как указан в ярлыке, если нет, то будет совпадать с содержимым тега. |
| selected | Указывает на то, что опция предварительно выбрана при загрузке страницы. |
| value | Указывает значение, которое будет отправлено на сервер. |
Тег <option> поддерживает глобальные атрибуты.
Атрибуты тега <optgroup>
| Атрибут | Описание |
|---|---|
| disabled | Указывает на то, что группа опций отключена и пользователь не может с ней взаимодейтсвовать. |
| label | Испольуется для создания ярлыка отображающего описание группы опций. Если ярлык есть, то название группы опций будет таким, как указан в ярлыке, если нет, то название будет отсутствовать. |
Тег <optgroup> поддерживает глобальные атрибуты.
Песочница
<select>
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</select>
<select>
<optgroup label="Группа 1">
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
</optgroup>
<optgroup label="Группа 1">
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</optgroup>
</select>
<hr>
<select multiple>
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</select>
<select size="4">
<option value="option1">Опция 1</option>
<option value="option2">Опция 2</option>
<option value="option3">Опция 3</option>
<option value="option4">Опция 4</option>
</select>
HTML