<option>

25 января 2023

Тег <option> используется в элементе <select> для определения доступных пунктов в выпадающем списке.

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

<select>
  <option value="value1">Вариант 1</option>
  <option value="value2">Вариант 2</option>
  <option value="value3">Вариант 3</option>
  <option value="value4">Вариант 4</option>
</select>

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

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

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

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

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

Простой выпадающий список:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Группировка пунктов в выпадающем списке:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Отключенный пункт списка:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Заранее выбранный пункт списка:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Множественный выбор:

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Значение выпадающего списка по умолчанию:

<select>
  <option value="" disabled selected>Select Car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

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

Для установки предпочтений пользователя: используйте тег <option>, чтобы создать выпадающий список для выбора пользователем своих предпочтений, например, языка или темы.
Для фильтрации данных: для создания выпадающего списка, который позволяет пользователям фильтровать данные, отображаемые на веб-странице, например, по категориям или диапазону дат.
Для выбора количества: для создания выпадающего списка, который позволяет пользователям выбирать количество товаров для покупки или резервирования.
Для выбора даты или времени: для создания выпадающего списка, позволяющего пользователям выбрать дату или время для события или встречи.
Для выбора страны: для создания выпадающего списка, позволяющего пользователям выбрать страну, например, для адреса доставки или выставления счета.
Для выбора варианта товара: для создания выпадающего списка, позволяющего пользователям выбрать вариант товара, например, размер или цвет.
Для выбора способа оплаты: для создания выпадающего списка, позволяющего пользователям выбрать способ оплаты, например, кредитную карту или PayPal.

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

Атрибут	Значение	Пример синтаксиса	Значение по умолчанию	Возможные значения	Обязательный или нет
`value`	Указывает значение, связанное с опцией	`<option value="volvo">Volvo</option>`	Текстовое содержание опции	Любая текстовая строка	Нет
`selected`	Указывает, что опция должна быть предварительно выбрана при загрузке страницы	`<option value="saab" selected>Saab</option>`	Нет	`selected`	Нет
`disabled`	Указывает, что опция должна быть отключена	`<option value="saab" disabled>Saab</option>`	`enabled`	`disabled`	Нет
`label`	Указание метки для опции	`<option value="saab" label="Saab">S</option>`	Текстовое содержание опции	Любая текстовая строка	Нет

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

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

Ограничения

Тег <option> должен использоваться внутри элемента <select>. Если тег не используется внутри элемента <select>, браузер проигнорирует его, и он не будет отображаться на странице.