Option html что это

Option html что это

Тег определяет отдельные пункты списка, создаваемого с помощью контейнера . Ширина списка определяется самым широким текстом, указанным в теге , а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис

 Пункт 1 Пункт 2 

Атрибуты

disabled Заблокировать для доступа элемент списка. label Указание метки пункта списка. selected Заранее устанавливает определенный пункт списка выделенным. value Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
 Выберите героя Чебурашка Крокодил Гена Шапокляк Крыса Лариса 
  

HTML тег

HTML тегиспользуется для указания вариантов ответа, которые может выбрать посетитель сайта. Текст, помещенный между тегамии, будет отображаться в качестве пунктов раскрывающегося списка. Ширина списка будет определяться самым длинным текстом, указанным в элементе.

Элемент должен располагаться внутри элемента , или .

Атрибуты

disabled: Указывает, что данный элемент списка должен быть выключен (выключенный элемент является неактивным). Значения для логического атрибута disabled можно задавать следующими способами:

Пример » label: Определяет более краткую версию варианта, укороченная весия будет отображатся в раскрывающемся списке. Пример »

Примечание: атрибут label не поддерживается браузером Firefox.

selected: Устанавливает вариант ответа, который должен быть выбран по умолчанию во время загрузки страницы. Если атрибут не установлен, то при загрузке страницы будет отображен первый вариант ответа из списка. Если пользователь не выберет никай другой вариант, то на сервер будет отправлен именно он в качестве значения данного элемента формы. Возможные значения логического атрибута selected:

Пример » value: Устанавливает значение для элемента списка, которое будет отправлено на сервер вместе с именем выбранного элемента. Если атрибут value отсутствует, то на сервер будет отправлен текст, расположенный непосредственно внутри элемента .

Стиль по умолчанию

Пример

 Volvo Saab Opel Audi  

Результат данного примера в окне браузера:

Specification HTML Standard
# the-option-element

Совместимость с браузерами

BCD tables only load in the browser

Option html что это

Один пункт в раскрывающемся списке .

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Светлана Коробцева ,
• Антон Капустинский

Обновлено 1 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег используется в интерактивных элементах управления для вёрстки одиночного пункта списка.

Пример

Скопировать ссылку «Пример» Скопировано

   Ваш город  -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск   form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>    Скопировать Скопировано Не удалось скопировать   

Подробно

Скопировать ссылку «Подробно» Скопировано

Тегом размечается каждый элемент выпадающего списка , группы опций или перечня .

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

disabled

Скопировать ссылку «disabled» Скопировано

Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега с заданным атрибутом disabled .

   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city1"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara" disabled>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

label

Скопировать ссылку «label» Скопировано

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

   Санкт-Петербург Самара Волгоград Екатеринбург  select name="city2"> option value="petersburg" selected label="Ленинград">Санкт-Петербургoption> option value="samara" label="Куйбышев">Самараoption> option value="volgograd" label="Сталинград">Волгоградoption> option value="ekaterinburg" label="Свердловск">Екатеринбургoption> select>    Скопировать Скопировано Не удалось скопировать   

Несмотря на то, что задано текстовое содержимое тега , в выпадающем списке отображаются значения из атрибутов label :

selected

Скопировать ссылку «selected» Скопировано

   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city3"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan" selected>Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

   Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city4" multiple size="6"> option value="petersburg">Санкт-Петербургoption> option value="moscow" selected>Москваoption> option value="kazan" >Казаньoption> option value="samara" selected>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

value

Скопировать ссылку «value» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

�� Раньше браузеры не предоставляли никаких средств для нормальной стилизации элемента , и это доставляло очень много головной боли фронтенд-разработчикам 🙁 Стиль элементов можно было поменять, только если тегу был задан атрибут multiple . Тогда список целиком становился частью потока страницы, и мы имели возможность применять стили к его элементам. Вот как выглядело решение:

   Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city" id="city-select" multiple> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

 select  counter-reset: cnt;> option:nth-child(2n)  background-color: #282a2e;> option  counter-increment: cnt;> option::before  content: counter(cnt) ". ";> select  counter-reset: cnt; > option:nth-child(2n)  background-color: #282a2e; > option  counter-increment: cnt; > option::before  content: counter(cnt) ". "; >    Скопировать Скопировано Не удалось скопировать   

Теперь практически все браузеры умеют стилизовать даже без атрибута multiple .

В Safari стилизация для доступна не полностью, даже если тег имеет атрибут multiple .