HTML тег <select>

HTML теги

Значение и применение

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


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


Используя элемент <optgroup> вы можете группировать связанные данные в раскрывающемся списке и создавать отдельные группы.

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<select>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
autofocushtml5autofocusУказывает, что выпадающий список должен автоматически получать фокус при загрузке страницы.
disableddisabledЛогический атрибут, который указывает, что выпадающий список должен быть отключен.
formhtml5form_idЗадает одну, или несколько форм к которым элемент принадлежит.
multiplemultipleЛогический атрибут, который указывает, что может быть выбрано несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
namenameОпределяет имя для выпадающего списка.
requiredhtml5requiredУказывает, что пользователь должен выбрать значение перед отправкой формы.
sizenumberОпределяет число видимых опций в выпадающем списке.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <select></title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

В браузере это выглядит следующим образом:

HTML раскрывающийся список.
HTML раскрывающийся список.

Рассмотрим следующий пример в котором с использованием тега <optgroup> сгруппируем логически две группы в нашем раскрывающемся списке.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Группа №1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Группа №2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

Группировка данных в раскрывающемся списке HTML.
Группировка данных в раскрывающемся списке HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 3 новых атрибута.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

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

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги