W3docs
ru
Войти

HTML <select> Тег

HTML-тег <select> создаёт выпадающий список <option>. Атрибуты, метки, multiple, size, required и заглушки.

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

На этой странице рассматриваются синтаксис, все атрибуты, доступность (подписи), поведение multiple / size / required, паттерн отключённой-заглушки, а также различия между <select> и полем ввода с <datalist>.

Тег <option> определяет каждый пункт списка и располагается внутри <select>. По умолчанию выбран первый вариант; добавьте атрибут selected к нужному варианту, чтобы изменить предвыбранный пункт. Используйте <optgroup> для группировки связанных вариантов под полужирным нередактируемым заголовком.

Чтобы отправить выбранное значение, задайте <select> атрибут name и поместите элемент в <form> (или свяжите с формой через атрибут form). На сервер отправляется значение value выбранного варианта.

Совет

Если нужно отправить данные на сервер или прочитать список из скрипта, у <select> должен быть атрибут name, и он должен быть связан с <form>.

Всегда подписывайте <select>

Сам по себе <select> не даёт пользователю никакого текстового описания того, что он выбирает, и программы экранного доступа не объявляют ничего осмысленного. Всегда используйте его вместе с <label>: задайте id у <select> и укажите этот id в атрибуте for метки. Это также позволяет пользователю нажать на текст метки, чтобы перейти к элементу управления.

Пример <select> с подписью

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="topic">Choose a topic:</label>
    <select id="topic" name="topic">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
    </select>
  </body>
</html>
Result

Если видимая подпись невозможна, используйте aria-label="..." на <select>, чтобы вспомогательные технологии всё равно сообщали о его назначении.

Синтаксис

Тег <select> является парным. Содержимое записывается между открывающим (<select>) и закрывающим (</select>) тегами.

Пример HTML-тега <select>:

Пример HTML-тега <select>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>
Попробуйте сами »
Result

Пример HTML-тега <select> с тегом <optgroup>:

Пример HTML-тега <select> с тегом <optgroup>

<!DOCTYPE html>
<html>
  <head>
    <title>Window title of the page</title>
  </head>
  <body>
    <select aria-label="Books and Snippets">
      <optgroup label="Books">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>
Попробуйте сами »

В этом примере тег <optgroup> используется для объединения вариантов в группы.

Result

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

Добавьте boolean-атрибут multiple, чтобы пользователь мог выбрать более одного варианта. Тогда элемент управления отображается в виде прокручиваемого списка, а не выпадающего меню. Используйте size, чтобы задать количество видимых строк. Чтобы выбрать несколько значений, пользователь удерживает Ctrl (Cmd на Mac) при нажатии или Shift для выбора диапазона.

Пример multiple и size

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="langs">Languages you know:</label>
    <select id="langs" name="langs" multiple size="4">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">JavaScript</option>
      <option value="php">PHP</option>
      <option value="sql">SQL</option>
    </select>
  </body>
</html>
Result

При отправке <select> с атрибутом multiple каждое выбранное значение передаётся под одним и тем же именем name (например, langs=html&langs=js).

Добавление заглушки

У <select> всегда есть значение, поэтому нативного placeholder не существует. Распространённый обходной путь — первый вариант, который пустой, предвыбранный, отключённый и скрытый: он показывает подсказку, не может быть выбран повторно и остаётся скрытым после открытия списка. Сочетайте его с required, чтобы форма не отправлялась без реального выбора.

Пример варианта-заглушки

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="size">Choose a size:</label>
      <select id="size" name="size" required>
        <option value="" disabled selected hidden>Choose one</option>
        <option value="s">Small</option>
        <option value="m">Medium</option>
        <option value="l">Large</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>
Result

Поскольку у заглушки value пустое, атрибут required воспринимает это как «ничего не выбрано»: попытка отправить форму без выбора реального варианта вызовет встроенное сообщение проверки браузера.

<select> vs. <datalist>

<select> вынуждает пользователя выбирать из фиксированного списка. Если вместо этого нужно текстовое поле, предлагающее значения, которые пользователь может принять или проигнорировать, — это задача для <datalist>, подключённого к текстовому <input> через атрибут list, а не функция <select>. Это отдельный элемент с иным поведением; используйте его, когда ввод с автодополнением подходит лучше, чем строгий выпадающий список.

Атрибуты

АтрибутЗначениеОписание
autofocusautofocusЗадаёт, что список должен получить фокус после загрузки страницы.
disableddisabledУказывает, что список отключён и пользователь не может взаимодействовать с ним.
formform_idСвязывает <select> с <form> по id этой формы, так что элемент управления может располагаться вне тега <form> в разметке и при этом отправляться вместе с ней.
multiplemultipleУказывает, что можно выбрать более одного варианта. Способ выбора нескольких вариантов зависит от операционной системы. В Windows нужно удерживать кнопку CTRL, на Mac — кнопку CMD.
namenameЗадаёт имя выпадающего меню. Может использоваться для доступа к данным формы после её отправки или для связи с элементом JavaScript.
requiredrequiredУказывает, что выбор варианта является обязательным.
sizenumberУказывает количество видимых вариантов в выпадающем списке. Если значение атрибута «size» больше 1 и меньше общего числа вариантов в списке, браузер автоматически добавит прокрутку, чтобы показать, что есть ещё варианты.

Тег <select> поддерживает Глобальные атрибуты и Атрибуты событий.

Стилизация HTML-тега <select>

Элемент <select> частично отрисовывается операционной системой, поэтому его сложно полностью стилизовать средствами CSS, и результат различается в зависимости от браузера. Вы можете надёжно задать шрифт, цвета, отступы и блочную модель для самого элемента. Чтобы заменить нативную стрелку выпадающего списка собственной, сбросьте системное оформление с помощью appearance: none и добавьте свою стрелку (например, через background-image или обёртку с псевдоэлементом). Раскрытый список вариантов и стилизация отдельных вариантов остаются лишь частично управляемыми; для идеально точных, полностью пользовательских выпадающих списков разработчики обычно создают виджет из элементов, отличных от <select>, с использованием JavaScript.

Практика

Практика
Какова функция HTML-элемента 'select'?
Какова функция HTML-элемента 'select'?
Was this page helpful?