Select html5: Тег | htmlbook.ru

Leave a Comment / Html / By /

— 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
DOM интерфейсHTMLSelectElement

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

autofocus HTML5

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

disabled

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

form
 HTML5

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

multiple

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

name

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

required HTML5

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

size

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

Примечание: Примечания Firefox: Согласно спецификации 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)

Last modified: , by MDN contributors

Тег | HTML справочник

HTML теги

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

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

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
autofocusautofocusУказывает, что выпадающий список должен автоматически получать фокус при загрузке страницы.
disableddisabledЛогический атрибут, который указывает, что выпадающий список должен быть отключен.
formform_idЗадает одну, или несколько форм к которым элемент принадлежит.
multiplemultipleЛогический атрибут, который указывает, что может быть выбрано несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
namenameОпределяет имя для выпадающего списка.
requiredrequiredУказывает, что пользователь должен выбрать значение перед отправкой формы.
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 раскрывающийся список.

Рассмотрим следующий пример в котором с использованием тега <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 4.01 от HTML 5

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

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

Нет.

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

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

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

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

HTML теги

&двоеточие; Элемент HTML Option — HTML: Язык гипертекстовой разметки

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

Спецификация
HTML Standard
# the-option-element

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • Другие элементы, связанные с формой:
    , , ,