<select>: Элемент HTML выбора

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

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

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

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

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

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

Дополнительные примеры см. на странице Нативные элементы формы: Содержание раскрывающегося списка.

Этот элемент включает глобальные атрибуты.

autocomplete

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

autofocus

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

disabled

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

form

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

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

multiple

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

name

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

required

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

size

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

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

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

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

Пользователи с клавиатурой могут выбрать несколько смежных элементов следующим образом:

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

Пользователи с клавиатурой могут выбрать несколько несмежных элементов следующим образом:

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

Элемент <select> известен тем, что его сложно эффективно стилизовать с помощью CSS. Вы можете изменять некоторые аспекты, как и с любым элементом — например, манипулировать моделью бокса, отображаемым шрифтом и т. д., а также использовать свойство appearance для удаления системного appearance по умолчанию.

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

Для получения более подробной информации о стилизации <select>, см.:

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

Элементы <hr> внутри <select> следует рассматривать как чисто декоративные, поскольку они в настоящее время не представлены в дереве доступности и поэтому не видны для технологий辅助.

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

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</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>:

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

Результат

Вы увидите, что:

• Несколько вариантов можно выбрать, потому что мы включили атрибут multiple.
• Атрибут size заставляет отображаться только 4 строки за раз; вы можете прокрутить, чтобы просмотреть все варианты.
• Мы включили элементы <optgroup>, чтобы разделить опции на разные группы. Это чисто визуальная группировка, её визуализация обычно включает в себя выделение имени группы жирным шрифтом и отступ вариантов.
• Вариант "Хомяк" включает атрибут disabled и поэтому не может быть выбран.

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