<select> элемент HTML select

Элемент <select> HTML представляет элемент управления, предоставляющий меню параметров.

Попробуйте

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}

В приведённом выше примере показано типичное использование <select>. Ему задан атрибут id, который позволяет связать его с элементом <label> для обеспечения доступности, а также атрибут name, задающий имя связанной точки данных, отправляемой на сервер. Каждый пункт меню определяется элементом <option>, вложенным в <select>.

У каждого элемента <option> должен быть атрибут value, содержащий значение данных, которое следует отправить на сервер при выборе этого пункта. Если атрибут value не указан, значением по умолчанию становится текст внутри элемента. Чтобы при первой загрузке страницы пункт был выбран по умолчанию, можно добавить атрибут selected элементу <option>. Если атрибут selected не указан, по умолчанию будет выбран первый элемент <option>.

Элемент <select> представлен в JavaScript объектом HTMLSelectElement. У этого объекта есть свойство value, содержащее значение выбранного <option>.

У элемента <select> есть специальные атрибуты, с помощью которых можно управлять его поведением, например multiple, задающий возможность выбора нескольких пунктов, и size, задающий количество пунктов, отображаемых одновременно. Он также поддерживает большинство общих атрибутов полей ввода формы, например required, disabled, autofocus и другие.

Чтобы создать в раскрывающемся списке отдельные группы пунктов, можно вложить элементы <option> в элементы <optgroup>. Также можно добавить элементы <hr>, чтобы визуально отделить пункты друг от друга.

Дополнительные примеры приведены в разделе Встроенные элементы управления формами: раскрывающиеся списки.

Атрибуты

Этот элемент поддерживает глобальные атрибуты.

autocomplete

Строка, которая служит подсказкой для функции автозаполнения пользовательского агента. Полный список значений и сведения об использовании автозаполнения приведены в статье Атрибут autocomplete в HTML.

autofocus

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

disabled

Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если атрибут не указан, элемент управления наследует значение от содержащего его элемента, например <fieldset>; если содержащего элемента с атрибутом disabled нет, элемент управления включён.

form

Элемент <form>, с которым нужно связать <select> (его владелец формы). Значением этого атрибута должен быть id элемента <form> в том же документе. (Если атрибут не задан, <select> связывается со своим родительским элементом <form>, если он есть.)

Этот атрибут позволяет связывать элементы <select> с элементами <form> в любом месте документа, а не только внутри <form>. Он также может переопределять родительский элемент <form>.

multiple

Этот логический атрибут указывает, что в списке можно выбрать несколько пунктов. Если он не указан, одновременно можно выбрать только один пункт. При указании multiple большинство браузеров отображает прокручиваемый список вместо однострочного раскрывающегося списка. Несколько выбранных пунктов отправляются в соответствии с соглашением о массивах URLSearchParams, то есть name=value1&name=value2.

name

Этот атрибут задаёт имя элемента управления.

required

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

size

Если элемент управления представлен в виде прокручиваемого списка (например, когда указан multiple), этот атрибут задаёт количество строк списка, видимых одновременно. Браузеры не обязаны отображать элемент select в виде прокручиваемого списка. Значение по умолчанию — 0.

Примечание: Согласно спецификации HTML, значением size по умолчанию должно быть 1; однако на практике это приводит к сбоям на некоторых сайтах, и ни один другой браузер сейчас так не делает. Поэтому Mozilla пока продолжает возвращать в Firefox значение 0.

Примечания по использованию

Выбор нескольких пунктов

На настольном компьютере есть несколько способов выбрать несколько пунктов в элементе <select> с атрибутом multiple:

Пользователи мыши могут удерживать клавиши Ctrl, Command или Shift (в зависимости от операционной системы), а затем щёлкать по нескольким пунктам, чтобы выбирать или снимать выбор.

Чтобы выбрать несколько расположенных подряд элементов с помощью клавиатуры:

• Установите фокус на элемент <select> (например, с помощью клавиши Tab).
• С помощью клавиш управления курсором Up и Down перейдите к верхнему или нижнему элементу нужного диапазона и выберите его.
• Удерживайте клавишу Shift, а затем используйте клавиши управления курсором Up и Down, чтобы расширить или сузить диапазон выбранных элементов.

Чтобы выбрать несколько несмежных элементов с помощью клавиатуры:

• Установите фокус на элемент <select> (например, с помощью клавиши Tab).
• Удерживайте клавишу Ctrl, а затем используйте клавиши управления курсором Up и Down, чтобы переместить фокус на нужный пункт списка — тот, который будет выбран, если подтвердить выбор. Пункт, на котором находится фокус, выделен пунктирной рамкой, как ссылка с фокусом клавиатуры.
• Нажмите Space, чтобы выбрать или снять выбор с пункта, на котором находится фокус.

Стилизация с помощью CSS

Исторически элемент <select> было трудно эффективно стилизовать с помощью CSS. В следующих руководствах описаны функции, позволяющие полностью настраивать элементы select:

• Настраиваемые элементы select
• Настраиваемые списки select

Стилизация select в старых браузерах

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

Однако с традиционными элементами <select> сложно добиться единообразного отображения во всех браузерах. Если вам нужен полный контроль, рассмотрите возможность использования библиотеки с хорошими средствами стилизации элементов формы или попробуйте создать собственное раскрывающееся меню с помощью несемантических элементов, JavaScript и WAI-ARIA, чтобы обеспечить семантику.

Для стилизации элементов <select> в открытом состоянии, то есть когда отображается список раскрывающихся пунктов, можно использовать псевдокласс :open. Это не относится к многострочным элементам <select> (с установленным атрибутом multiple): обычно они отображаются как прокручиваемый список, а не как раскрывающийся список, поэтому открытого состояния у них нет.

Дополнительные сведения о стилизации <select> в старых браузерах:

• Стилизация HTML-форм
• Расширенная стилизация HTML-форм
• Свойство field-sizing, которое управляет размером элементов <select> относительно содержащихся в них пунктов.

Доступность

Элементы <hr> внутри <select> следует считать исключительно декоративными: в настоящее время они не отображаются в дереве доступности и поэтому недоступны вспомогательным технологиям.

Примеры

Базовый select

В следующем примере создаётся раскрывающееся меню с тремя значениями. У второго пункта есть атрибут selected, поэтому он выбран по умолчанию.

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Результат

Select с группировкой пунктов

В следующем примере создаётся раскрывающееся меню с группировкой с помощью элементов <optgroup> и <hr>, чтобы пользователю было проще разобраться в содержимом списка.

<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Результат

Расширенный select с несколькими функциями

Следующий пример сложнее и демонстрирует дополнительные возможности элемента <select>:

• Атрибут multiple позволяет выбрать несколько пунктов.
• Атрибут size имеет значение 4, поэтому одновременно отображаются 4 строки. Пользователи могут прокручивать список, чтобы просмотреть все пункты.
• Добавлены два элемента <optgroup>, создающие две визуальные группы: обычно название группы выделяется полужирным шрифтом, а вложенные пункты отображаются с отступом.
• Для пункта «Хомяк» указан атрибут disabled, поэтому его нельзя выбрать.

<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Результат

Техническая сводка

Спецификации

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

См. также

• Элемент <option>
• Элемент <optgroup>
• Настраиваемые элементы select
• События, генерируемые элементами <select>: change, input