Тег <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 Значение для отправки на сервер
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода

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