Тег <select>

Синтаксис

Описание

Тег <select> (от англ. selection — выбор) используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов.

Для определения доступных вариантов выбора используется тег <option>, вложенный в контейнер <select>.

По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected в нужном <option>.

Для объединения нескольких вариантов в одну группу используется тег <optgroup>.

Примечание!

Внешний вид списка зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка зависит от длины текста в теге <option>. Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег <select> необходимо поместить внутрь формы (тег <form>).

Атрибуты, которые можно использовать в теге <select>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут	Значение	Описание
autofocus	autofocus	Определяет, что список должен получить фокус при загрузке страницы
disabled	disabled	Указывает, что список не активен, то есть пользователь не сможет взаимодействовать с ним
form	id формы	Определяет форму с которой связан элемент
multiple	multiple	Указывает, что за один раз можно выбрать несколько вариантов. Способ выбора нескольких вариантов зависит от операционной системы: в Windows необходимо удерживать нажатой клавишу CTRL, в Mac - клавишу CMD
name	имя	Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript
required	required	Указывает, что выбор значения является обязательным
size	число	Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег select</title>

</head>

<body>

<select>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">Javascript</option>
</select>
</body>
</html>

Отображение в браузере:

Параметры CSS по умолчанию

select {

writing-mode: horizontal-tb !important;

text-rendering: auto;

color: fieldtext;

letter-spacing: normal;

word-spacing: normal;

line-height: normal;

text-transform: none;

text-indent: 0px;

text-shadow: none;

display: inline-block;

text-align: start;

appearance: auto;

box-sizing: border-box;

align-items: center;

white-space-collapse: preserve;

text-wrap: nowrap;

-webkit-rtl-ordering: logical;

background-color: field;

cursor: default;

margin: 0em;

border-width: 1px;

border-style: solid;

border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

border-image: initial;

border-radius: 0px;

}

select:not(:-internal-list-box) {

overflow: visible !important;

}

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

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<select>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да