HTML тег <option>
Тег <option> определяет элемент выпадающего списка. Описание тега, атрибуты и примеры использования.
Тег <option> определяет отдельный элемент внутри выпадающего списка, созданного с помощью тега <select>, или вариант автодополнения внутри <datalist>. Он может быть дочерним элементом <select>, <datalist> или <optgroup>, который группирует связанные варианты.
Каждый <option> содержит два отдельных фрагмента данных: текст, который видит пользователь, и значение, которое передаётся при отправке формы. Понимание разницы между ними — ключ к правильному использованию этого тега, и ниже это рассматривается подробно.
Синтаксис
Тег <option> может быть написан как парный или как самозакрывающийся. При парном использовании текст для отображения записывается между открывающим (<option>) и закрывающим (</option>) тегами.
Тег <option> обычно используется с атрибутом value, чтобы указать, какое значение должно быть отправлено на сервер для дальнейшей обработки.
Пример HTML тега <option>:
Выпадающий список с HTML тегом <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>Здесь <select> обёрнут в <form>, поскольку выпадающий список предназначен для отправки данных на сервер. <select> отлично работает и без формы в случае чисто клиентских скриптов, но для фактической передачи выбранного значения куда-либо необходима форма или JavaScript.
Атрибут value и его особенность
Атрибут value содержит данные, которые отправляются, когда соответствующий вариант выбран. Текст между тегами — это только то, что видит пользователь, и он не обязан совпадать со значением.
Если опустить value, браузер отправит текстовое содержимое элемента вместо значения. Эти два варианта ведут себя одинаково при отправке:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>Это удобно, но также является распространённым источником ошибок: если впоследствии изменить видимый текст (при переводе, изменении регистра или формулировки) у элемента без value, данные, получаемые сервером, тоже изменятся. Для предсказуемой и стабильной отправки данных всегда задавайте явное значение value.
Пример HTML тега <option> с тегом <datalist>.
Список аэропортов отправления с тегом option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>В этом примере теги <option> размещены внутри тега <datalist> без атрибута value, поскольку текстовое содержимое служит вариантом для автодополнения.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| disabled | disabled | Указывает, что выбор элемента отключён. |
| label | text | Задаёт имя для элемента списка. |
| selected | selected | Устанавливает, что вариант должен быть выбран по умолчанию при загрузке страницы. |
| value | text | Задаёт значение, которое отправляется на сервер. |
Тег <option> поддерживает глобальные атрибуты и атрибуты событий.
Атрибуты selected и disabled
selected отмечает вариант, который выбран заранее при загрузке страницы. disabled делает вариант видимым, но недоступным для выбора (он отображается серым цветом). В этом примере Blue выбран по умолчанию, а Green недоступен для выбора:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Вариант-заполнитель
По умолчанию <select> всегда отображает первый вариант, поэтому встроенного «заполнителя», как у текстового поля ввода, не существует. Распространённый паттерн — добавить первым элемент с пустым значением, атрибутами disabled и selected. Он предлагает пользователю сделать выбор, не может быть отправлен как реальное значение и не может быть повторно выбран после того, как пользователь выбрал что-то другое:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>Атрибут required принадлежит элементу <select>, а не <option>. Поскольку у заполнителя выше пустое значение value, форму нельзя отправить до тех пор, пока пользователь не выберет реальный вариант.
Отключение целой группы
Атрибут disabled также работает на <optgroup>, что отключает все варианты внутри него сразу — это полезно для отображения категорий, временно недоступных:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>Атрибут label
Атрибут label задаёт альтернативный заголовок для варианта. Когда label установлен, браузеры отображают его вместо текстового содержимого. Если label опущен, текст между тегами используется в качестве метки — именно поэтому его обычно не указывают и видимый текст записывают напрямую.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>На практике атрибут label у обычного <option> нужен редко; наибольший смысл он имеет у <optgroup>, где label задаёт заголовок группы.