Тег <option> в HTML определяет пункт списка <select> - выпадающего списка или списка с выбором нескольких значений, а также списка вариантов для поля <input> со списком предопределенных вариантов <datalist>.
Тег <option> должен быть расположен внутри HTML тегов <select> или <datalist>.
Выбранным значением, передаваемым при отправке формы, считается содержимое атрибута value выбранного элемента option, если такой атрибут использован, либо содержимое тега, если атрибут value не указан.
Если HTML тег <option> используется как пункт списка <select>, выбранным пунктом по умолчанию будет считаться первый <option> в HTML коде, либо тег с атрибутом selected.
В обязательном для заполнения списке select (списке с атрибутом required), для корректной работы проверки на заполнение, первому либо выбранному по умолчанию пункту option необходимо задать атрибут value="" (пустое значение атрибута value).
Несколько пунктов <option> можно объединять в группы с помощью тега <optgroup>.
Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Вариант 1:
<option>текст</option>
Вариант 2 (только для использования в datalist):
<option value="текст">
Примеры использования пункта списка <option> в HTML коде
Тег <option> может выступать в роли пункта списка, либо предопределенного варианта для поля формы.
Тег <option> как пункт выпадающего списка select
HTML код выпадающего списка с пунктами option
<select name="continent_1">
<option value="1">Евразия</option>
<option value="2">Австралия</option>
<option value="3">Северная Америка</option>
<option value="4">Южная Америка</option>
<option value="5">Африка</option>
<option value="6">Антарктида</option>
</select>
Тег <option> в <datalist> как предопределенный вариант для поля input
Подходящие предопределенные варианты выводятся на экран в момент ввода. Попробуйте ввести "Америка" в поле ниже.
HTML код примера использования option в datalist
<input list="continents" name="continent_2" type="text">
<datalist id="continents">
<option value="Евразия">
<option value="Австралия">
<option value="Северная Америка">
<option value="Южная Америка">
<option value="Африка">
<option value="Антарктида">
</datalist>
Поддержка браузерами
| Тег | |||||
| <option> | Да | Да | Да | Да | Да |
Атрибуты тега option
| Атрибут | Значения | Описание |
|---|---|---|
| disabled | не указывается / disabled |
Логический атрибут. Если указан, отключает возможность выбора данного пункта. |
| label | текст | Название пункта, выводимое в выпадающем списке (подпись пункта). Обычно, это краткий вариант названия для пунктов с длинными названиями. |
| selected | не указывается / selected |
Логический атрибут. Если указан, данный пункт списка считается выбранным. |
| value | текст |
Значение пункта. Содержимое этого атрибута используется как значение, передаваемое на сервер при отправке формы. Если атрибут не указан, как значение используется содержимое тега <option>. |
Тег <option> также поддерживает глобальные HTML атрибуты.