Тег <option> HTML пункт выпадающего списка

Рейтинг: 5 из 5, голосов 1
+++++

Тег <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>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<option> Да Да Да Да Да

Атрибуты тега option

Атрибут Значения Описание
disabled не указывается / disabled

Логический атрибут. Если указан, отключает возможность выбора данного пункта.

label текст Название пункта, выводимое в выпадающем списке (подпись пункта). Обычно, это краткий вариант названия для пунктов с длинными названиями.
selected не указывается / selected

Логический атрибут. Если указан, данный пункт списка считается выбранным.

value текст

Значение пункта. Содержимое этого атрибута используется как значение, передаваемое на сервер при отправке формы.

Если атрибут не указан, как значение используется содержимое тега <option>.

Тег <option> также поддерживает глобальные HTML атрибуты.

Оцените, насколько полезна эта страница
+++++
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.