Тег option (от английского option, «вариант») задаёт один вариант выбора. Его записывают внутри select, optgroup или datalist. Текст внутри option показывается пользователю, а атрибут value задаёт то, что уйдёт на сервер; без value уходит сам текст. Закрывающий </option> можно опустить, если сразу за вариантом идёт другой option, optgroup или конец родителя.
Варианты собирает в список тег select, а его работу с формой описывает тег form. Основы выбора из списка разобраны в уроке «Выпадающий список в HTML: select и option».
<select name="color">
<option value="r">Красный</option>
<option value="g">Зелёный</option>
</select>В этой статье
- Тег option в HTML: что это и где его записывают
- Текст и value: что показывается и что уходит на сервер
- Атрибут label: другая надпись варианта
- Атрибут selected: выбранный вариант и defaultSelected
- Недоступный и скрытый вариант: disabled и hidden
- Можно ли добавить теги в option: что записывают внутри
- Вернуть selected после отправки формы: пример на PHP
- Тег option и JavaScript: new Option, add и remove
- CSS для option: что стилизуется и customizable select
- Доступность option: роль, название и состояние
- Атрибуты тега option
- Вопросы про тег option: datalist и атрибут checked
- Частые ошибки с тегом option
Тег option в HTML: что это и где его записывают
Вариант option имеет смысл только внутри родителя. В select варианты раскрываются списком. В optgroup они собираются в группу с заголовком из label. В datalist они становятся подсказками для поля input: сам datalist на странице не виден. Запись вне этих родителей недопустима: браузер выведет текст как обычный блок, выбирать из него нечего.
<select name="c">
<option>Красный</option>
</select>
<input list="colors" name="c">
<datalist id="colors">
<option value="Красный"></option>
</datalist>Пример: один и тот же option в разных родителях
Выберите запись: под результатом родитель варианта, его display и пояснение.
Текст и value: что показывается и что уходит на сервер
У варианта три связанные части. Текст показывается в списке. Значение уходит в данные формы и берётся из value, а если атрибута нет, то из текста. Видимую надпись задаёт label, а если его нет, то текст. В скрипте это свойства text, value и label. Пустой value="" считается значением: на сервер уйдёт пустая строка, а не текст. Пробелы в значении атрибута сохраняются как записано, а свойство text сжимает пробелы по краям и внутри.
<option>Красный</option>
<option value="r">Красный</option>
<option value="">Красный</option>Пример: text, value и label у выбранного варианта
Выберите запись и вариант в списке: под результатом свойства варианта и данные формы.
Атрибут label: другая надпись варианта
Атрибут label заменяет надпись варианта в списке, а текст и value остаются прежними. Он удобен для сокращений: в списке «Кр.», на сервер уходит r. Вариант с label может не иметь текста: <option value="r" label="Красный"></option> допустим. Без label и без текста запись недопустима, а пустой label="" проверка HTML считает ошибкой.
<option value="r" label="Кр.">Красный</option>Пример: что меняет label
Выберите запись и вариант: под результатом text, value и label.
Атрибут selected: выбранный вариант и defaultSelected
Атрибут selected выбирает вариант заранее. У варианта два связанных свойства: selected показывает, выбран ли он сейчас, а defaultSelected показывает, записан ли атрибут. Сброс формы возвращает выбор по атрибуту, то есть по defaultSelected. В обычном списке выбран один вариант, поэтому присваивание selected = true снимает выбор с остальных. В списке с multiple выбранными бывают несколько вариантов, и скрипт добавляет выбор, не снимая прежний.
<option value="g" selected>Зелёный</option>Пример: selected, defaultSelected и сброс формы
Выберите запись, смените выбор или нажмите кнопки: под результатом значения по вариантам.
Недоступный и скрытый вариант: disabled и hidden
Атрибут disabled делает вариант недоступным: он серый, а мышью выбрать его нельзя. Стрелки клавиатуры его пропускают. Отключённый optgroup отключает все варианты внутри: свойство disabled у них остаётся false, но :disabled совпадает. Если выбранного варианта нет, а первый отключён, браузер выбирает первый из доступных. Скрипт может выбрать и отключённый вариант, но в данные формы он не попадёт. Атрибут hidden убирает вариант из раскрытого списка, при этом вариант остаётся в options и может быть выбран скриптом.
<option value="2" disabled>Второй</option>
<option value="3" hidden>Скрытый</option>Пример: disabled, optgroup disabled и hidden
Выберите запись и вариант: под результатом состояние каждого варианта и данные формы.
Можно ли добавить теги в option: что записывают внутри
Внутри option записывают текст. Символы &, < и > пишут сущностями, а отступ в начале варианта делают неразрывными пробелами : обычные пробелы по краям обрезаются. Теги b, span и подобные браузер в DOM сохраняет, а проверка HTML их принимает, но в обычном списке показывается только текст. В customizable select внутри варианта можно оформлять разметку. Вторая option, записанная внутри первой, закрывает первую.
<option> Вложенный</option>
<option><b>Жирный</b> текст</option>Пример: что остаётся внутри варианта
Выберите запись: под результатом число вариантов, text первого и теги внутри.
Вернуть selected после отправки формы: пример на PHP
После отправки формы страница приходит с сервера заново, и выбранный вариант нужно записать в ответ. Сервер сравнивает полученное значение со значением каждого варианта и дописывает selected совпавшему. В PHP полученное значение находится в $_GET["color"] для метода get и в $_POST["color"] для post. Значения вариантов берут из своего массива, а полученное значение только сравнивают, не выводя на страницу.
<select name="color">
<?php foreach ($colors as $value => $title): ?>
<option value="<?= $value ?>"<?= $value === ($_GET["color"] ?? "") ? " selected" : "" ?>>
<?= htmlspecialchars($title) ?>
</option>
<?php endforeach; ?>
</select>Пример: страница после отправки формы
Выберите цвет и нажмите «Отправить»: под результатом разметка, которую вернул бы сервер.
Тег option и JavaScript: new Option, add и remove
Вариант создают конструктором new Option(text, value, defaultSelected, selected). Без аргументов получается пустой вариант, а с одним текстом значением служит этот текст. Вариант добавляют через select.add(option) или select.options.add(option, index), удаляют через option.remove(). Свойства text, value, label и selected читаются и меняются, свойство index только читается, а option.form возвращает форму родительского select. Список из массива собирают циклом.
const select = document.querySelector("select");
select.add(new Option("Жёлтый", "y"));
select.options[0].selected = true;Пример: создание и изменение вариантов
Выберите запись и нажмите «Выполнить»: под результатом ответ скрипта.
CSS для option: что стилизуется и customizable select
Оформление варианта ограничено. Раскрытый список рисует браузер, поэтому поддержка свойств у option в браузерах различается. Псевдокласс :checked совпадает с выбранным вариантом, а :disabled с отключённым. Полное оформление даёт customizable select: после appearance: base-select варианты стилизуются как обычные элементы. Его записывают внутри @supports, чтобы остальные браузеры показали обычный список.
option:checked {
background-color: #e6f3f1;
}
option:disabled {
color: #999;
}Пример: стили вариантов и base-select
Выберите вариант оформления и раскройте список: под результатом вычисленные цвета.
Доступность option: роль, название и состояние
У варианта роль option, и менять её через role не следует: проверка HTML считает это ошибкой. Название берётся из label, а если его нет, из текста. Выбранный вариант программа чтения с экрана объявляет выбранным, а отключённый недоступным. Название самого списка задают через label или aria-label у select, а не у варианта. Как это делается, показано в уроке «Элементы форм в HTML: select, textarea, checkbox и radio».
<select aria-label="Цвет">
<option value="r" label="Кр.">Красный</option>
<option value="g" disabled>Зелёный</option>
</select>Пример: название и состояние вариантов
Выберите запись и вариант: под результатом роль, название и состояние каждого варианта.
Атрибуты тега option
Вариант принимает глобальные атрибуты и те, что собраны в таблице. Атрибуты самого списка (name, multiple, size) записывают у select. Несуществующие атрибуты отмечены отдельно: браузер их игнорирует, а проверка HTML сообщает об ошибке.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
value | актуален | Значение варианта в данных формы. Без него уходит текст | <option value="r"> |
selected | актуален | Выбирает вариант заранее. В обычном списке остаётся последний | <option selected> |
disabled | актуален | Отключает вариант: выбрать его нельзя, в данные он не попадёт | <option disabled> |
label | актуален | Надпись варианта вместо текста. Пустой label недопустим | <option label="Кр."> |
hidden | глобальный | Убирает вариант из раскрытого списка | <option hidden> |
checked | не существует | Для варианта нет, браузер его игнорирует. Нужен selected | <option checked> |
placeholder | не существует | Подсказку делают первым пустым вариантом, а не атрибутом | <option placeholder="x"> |
type | не существует | У варианта нет типа | <option type="x"> |
role | не менять | Роль option задана тегом, переопределять её не следует: проверка HTML сообщает об ошибке | <option role="menuitem"> |
Вопросы про тег option: datalist и атрибут checked
Вариант в datalist похож на вариант в select, и с ним часто связывают атрибут checked: чем вариант в datalist отличается от варианта в select и при чём здесь checked.
Чем option в datalist отличается от option в select?
В select вариант выбирается, и значение списка всегда одно из вариантов. В datalist варианты только подсказки для поля input: пользователь может ввести и своё значение, а selected на поле не действует. Вариант в datalist может не иметь текста, достаточно value, а в select пустой вариант без label недопустим. Подробнее про подсказки: урок про datalist.
<select name="c">
<option value="g" selected>Зелёный</option>
</select>
<input list="cl" name="c">
<datalist id="cl">
<option value="g" selected></option>
</datalist>Пример: selected в select и в datalist
Выберите способ: под результатом, какое значение получило поле.
Чем selected отличается от checked?
Атрибут selected относится к option, а checked относится к флажкам и переключателям input. На варианте checked ничего не делает: выбран остаётся первый вариант. Псевдокласс :checked общий: он совпадает и с отмеченным флажком, и с выбранным вариантом.
<option value="2" selected>Второй</option>
<input type="checkbox" checked>Пример: selected у option и checked у флажка
Выберите запись: под результатом состояние и данные формы.
Частые ошибки с тегом option
Ошибки с вариантом в основном про атрибуты и пустые записи.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Выбор записан атрибутом checked | Атрибут игнорируется, выбран первый вариант | Записать selected |
Пустой option без текста и label | Проверка HTML сообщает об ошибке, в списке пустая строка | Записать текст или label |
Пустой атрибут label="" | Запись недопустима, свойство label возвращает пустую строку | Убрать атрибут или записать надпись |
Пробелы внутри value | Пробелы сохраняются и уходят на сервер | Писать значение без лишних пробелов |
Два selected в списке без multiple | Остаётся последний выбранный | Записать один selected или добавить multiple |
Вариант записан вне select | Текст выводится на странице, выбрать нечего | Записать вариант в select, optgroup или datalist |
| Теги внутри варианта ради оформления | В обычном списке показывается только текст | Использовать CSS или customizable select |
| Отступ варианта пробелами в начале текста | Пробелы по краям обрезаются | Записать или задать padding |
Нет value, а сервер ждёт код | Уходит текст варианта, и правка надписи ломает обработку | Задать каждому варианту свой value |
