Тег <option>

Описание

Тег <option> определяет отдельный пункт в выпадающем списке (<select>), элементе выбора (<datalist>) или автозаполнения. Это строчный элемент, который должен находиться внутри <select>, <optgroup> или <datalist>.

Базовый синтаксис:
<select name="colors"> <option value="red">Красный</option> <option value="green" selected>Зелёный</option> <option value="blue">Синий</option> </select>
Пример с различными состояниями:
<select> <option value="" disabled selected>Выберите вариант</option> <option value="1">Активный вариант</option> <option value="2" disabled>Недоступный вариант</option> <option value="3">Другой вариант</option> </select>

Ключевые особенности:

  • Может содержать только текст (без других HTML-элементов)
  • Текст внутри отображается в выпадающем списке
  • Атрибут value может отличаться от отображаемого текста
  • Поддерживает множественный выбор (с атрибутом multiple у select)
  • Важен для доступности форм
Использование с datalist:
<input list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>

Рекомендации по использованию:

  • Всегда указывайте атрибут value для отправки данных
  • Используйте disabled+selected для placeholder-текста
  • Для длинных списков группируйте элементы через <optgroup>
  • Избегайте пустых value для обязательных полей
  • Для динамических списков используйте JavaScript

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

Атрибуты

disabled Отключает опцию
label Альтернативный текст для отображения
selected Предварительный выбор опции
value Значение для отправки на сервер
class CSS-классы для стилизации
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
title Всплывающая подсказка
translate Определяет возможность перевода

Поддержка браузерами
4.0 1.0 4.0 1.0 1.0