HTML-тег <option>
Тег <option> определяет элементы в раскрывающемся списке, заданном тегом <select>, или элементы списка данных для автозаполнения, заданном тегом <datalist>. Тег <option> может использоваться как дочерний элемент тегов <select>, <datalist> или <optgroup>, которые группируют элементы списка.
Оборачивайте тег <select> в элемент <form> только в том случае, если вам нужно отправить выбранные данные на сервер или получить к ним доступ через скрипты.
Синтаксис
Тег <option> может быть записан в виде парного тега или самозакрывающегося тега. При использовании в виде парного тега отображаемый текст записывается между открывающим (<option>) и закрывающим (</option>) тегами.
TIP
Тег <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>Результат
Computer Notebook Tablet ---
Пример 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:
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>Практика
Каковы характеристики и области применения HTML-тега <option>?