Тег <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>enableddisabledНет
labelУказание метки для опции<option value="saab" label="Saab">S</option>Текстовое содержание опцииЛюбая текстовая строкаНет

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

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

Ограничения

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

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

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

Альтернативных тегов для тега <option> не существует.

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

Прямой замены тегу <option> не существует.

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

Тег <option> не является устаревшим.


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

Прочитайте справочник по HTML или попробуйте себя в роли разработчика на интерактивных тренажёрах в HTML Academy. Это бесплатно.


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

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


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

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

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

<div>

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

  • 25 января 2023

<dl>

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

  • 25 января 2023

<ul>

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

  • 25 января 2023

<video>

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

  • 25 января 2023

<datalist>

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

  • 25 января 2023

<caption>

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

  • 25 января 2023

<ins>

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

  • 25 января 2023