<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>
, браузер проигнорирует его, и он не будет отображаться на странице.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <option>
не существует.
Чем заменить тег
Прямой замены тегу <option>
не существует.
Актуальность
Тег <option>
не является устаревшим.
Как узнать больше об HTML-тегах?
Прочитайте справочник по HTML или попробуйте себя в роли разработчика на интерактивных тренажёрах в HTML Academy. Это бесплатно.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023