Select html: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

— HTML | MDN

HTML тэг <select> представляет собой элемент управления который содержит меню опций:

Категории содержимого (en-US)	Основной поток, текстовый контент, интерактивный контент (en-US), списочный (en-US), labelable (en-US), сбрасываемый (en-US), и submittable (en-US) form-associated (en-US) element
Допустимое содержимое	Ноль или более `<option>` или `<optgroup>` элементы.
Пропуск тегов	Открывающий и закрывающий теги обязательны.
Допустимые родители	Любые элементы в которых разрешено текстовое содержимое
Допустимые ARIA-роли	`menu (en-US)`
DOM-интерфейс	`HTMLSelectElement`

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

autofocus HTML5

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

disabled

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

fieldset; если у родительского элемента не указан атрибут disabled, то элемент управления доступен для взаимодействия.

form HTML5

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

multiple

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

name

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

required HTML5

Этот логический атрибут указывает что обязательно должна быть выбрана опция и которая содержит не пустую строку.

size

Если элемент управления представлен как прокручиваемый список, этот атрибут указывает количество строк в списке, которые должны быть видны за раз. Браузеру не требуется представлять <select> в виде прокручиваемого списка. Значение по умолчанию 0.

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

<!-- Начально будет выбрано второе значение -->
<select name="select">
  <!--Supplement an id here instead of using 'name'-->
  <option value="value1">Значение 1</option>
  <option value="value2" selected>Значение 2</option>
  <option value="value3">Значение 3</option>
</select>

Результат

Примечания

Контент этого элемента статичен и не редактируемый (en-US).

Specification
HTML Standard # the-select-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Другие элементы форм: <form>, <legend>, <label>, <button>, <option>, <datalist> , <optgroup>, <fieldset>, <textarea> (en-US), <keygen> (en-US), <input>, <output>, <progress> and <meter>.
События запускаемые <select>: change. (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 4 мар. 2023 г. by MDN contributors.

— HTML — Дока

Кратко

Скопировано

Элемент <select> используется, когда нужно показать выпадающий список.

Пример

Скопировано

<form>  <label for="city-select">Ваш город</label>  <select name="city">    <option value="">-- Выберите город --</option>    <option value="petersburg">Санкт-Петербург</option>    <option value="samara">Самара</option>    <option value="perm">Пермь</option>    <option value="novosibirsk">Новосибирск</option>  </select></form>
           <form>
  <label for="city-select">Ваш город</label>
  <select name="city">
    <option value="">-- Выберите город --</option>
    <option value="petersburg">Санкт-Петербург</option>
    <option value="samara">Самара</option>
    <option value="perm">Пермь</option>
    <option value="novosibirsk">Новосибирск</option>
  </select>
</form>

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

Подробно

Скопировано

В примере выше показано типовое использование элемента <select>. Это своего рода обёртка над списком опций, которые задаются тегом <option>. Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

задать тегу <select> атрибут name;
задать каждому тегу <option> атрибут value. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега <option>.

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

Внутри тега <select> могут использоваться только теги <option> и <optgroup>.

Атрибуты

Скопировано

Тег <select> используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.

autocomplete

Скопировано

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

autofocus

Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled

Скопировано

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

form

Скопировано

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

multiple

Скопировано

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

name

Скопировано

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required

Скопировано

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

size

Скопировано

Числовой атрибут. Если включён атрибут multiple, то это число указывает на количество видимых пунктов списка.

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

Подсказки

Скопировано

💡 Выбрать несколько элементов списка, когда включён атрибут multiple, можно, используя клавиши Ctrl, Cmd и Shift. Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Скопировано

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

Скопировано

🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента <select>, но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:

<form>  <label for="city-select">Нестандартная стрелочка</label>  <div>    <select name="city">      <option selected disabled>-- Выберите город --</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>  </div></form>
           <form>
  <label for="city-select">Нестандартная стрелочка</label>
  <div>
    <select name="city">
      <option selected disabled>-- Выберите город --</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>
  </div>
</form>

В данном случае мы оборачиваем наш

<select> дополнительным блоком, чтобы задействовать псевдоэлемент ::after этого блока.

К сожалению, <select> относится к такому типу элементов, у которых нет своих псевдоэлементов ::before и ::after.

.select-wrapper {  position: relative;}.select-wrapper::after {  content: "⬇️";  position: absolute;  right: 0;  margin-top: -2px;  pointer-events: none;}select {  appearance: none;  width: 200px;  padding: 4px;  border-color: #aaa;  border-radius: 3px;}
           .select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: "⬇️";
  position: absolute;
  right: 0;
  margin-top: -2px;
  pointer-events: none;
}
select {
  appearance: none;
  width: 200px;
  padding: 4px;
  border-color: #aaa;
  border-radius: 3px;
}

Используем свойство appearance, чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент ::after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.

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

Атрибут формы HTML5 select

❮ Тег HTML5

Выберите автомобиль:

Попробуйте сами »

Определение и использование

Атрибут формы определяет форму, которой принадлежит раскрывающийся список.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

Поддержка браузера

Атрибут
форма	Да	Да	Да	Да	Да

Синтаксис

. Значение этого атрибута должно быть равен атрибуту id элемента

в том же документе.

❮ Тег HTML

Имя *

Email *

Сайт

Select html: Тег | htmlbook.ru

— HTML | MDN

Результат

Примечания

Found a content problem with this page?

— HTML — Дока

Кратко

Пример

Подробно

Атрибуты

Подсказки

На практике

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

Атрибут формы HTML5 select

Определение и использование

Поддержка браузера

Синтаксис

Рубрики

Рубрики