`<option>`

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

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

Кратко

Скопировано

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

Пример

Скопировано

        
          
          <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>
          <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>

Открыть демо в новой вкладке

Подробно

Скопировано

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

Атрибуты

Скопировано

`disabled`

Скопировано

Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега <optgroup> с заданным атрибутом 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>
          <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`

Скопировано

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

        
          
          <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>
          <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>

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

Открыть демо в новой вкладке

`selected`

Скопировано

Атрибут булевого типа. Если он задан, это означает, что пункт списка будет выбран по умолчанию. Если у выпадающего списка <select> не задан атрибут multiple, то атрибут selected может быть задан только одному тегу <option> в пределах этого списка. Если тегу <select> задан атрибут multiple, то атрибут selected может быть задан любому количеству тегов <option> в пределах списка.

        
          
          <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="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>
          <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 этого пункта. Если атрибут не задан, то при отправке будет использоваться текстовое содержимое тега <option>.

На практике

Скопировано

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

Скопировано

🛠 Раньше браузеры не предоставляли никаких средств для нормальной стилизации элемента <option>, и это доставляло очень много головной боли фронтенд-разработчикам :( Стиль элементов <option> можно было поменять, только если тегу <select> был задан атрибут 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 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) ". ";
}

Открыть демо в новой вкладке

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

Кратко

Пример

Подробно

Атрибуты

disabled

label

selected

value

На практике

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

Читайте также

<form>

FormData

:required

`disabled`

`label`

`selected`

`value`

`<form>`

`FormData`

`:required`