HTML :: Тег <select>

В HTML тег <select> (от англ. select – выбирать) используется для создания раскрывающихся списков с выбором предопределенных вариантов.

Синтаксис

	<select>
		<optgroup label="Заголовок группы">
			...
			<option>...</option>
			...
		</optgroup> 
	</select>			

	Закрывающий тег: обязателен.

Атрибуты

autofocus – данный логический атрибут автоматически устанавливает фокус элементу при загрузке страницы. Атрибут по умолчанию выключен и значений не принимает.
disabled – данный логический атрибут блокирует доступ к элементу. Это может потребоваться, например, когда нужно, чтобы список стал доступным только после заполнения предварительных полей. Пользователь не сможет взять его в фокус и сделать выбор. При этом сам элемент обычно имеет серый цвет, а его значение на сервер не передается. Атрибут по умолчанию выключен и значений не принимает.
form – связывает элемент с формой по ее идентификатору. В качестве значения принимает соответствующее значение атрибута id формы, с которой необходимо связать данный список. Это может потребоваться в случае, когда элемент расположен за пределами формы.
multiple – данный логический атрибут позволяет выбирать сразу несколько элементов списка. Атрибут по умолчанию выключен и значений не принимает.
name – задает уникальное имя элементу, которое позволяет обращаться к нему через скрипты. Кроме того, имя элемента отправляется на сервер вместе с его значением.
required – данный логический атрибут указывает на то, что в списке должен быть выбран хотя бы один вариант, не являющийся пустой строкой. Атрибут по умолчанию выключен и значений не принимает.
size – в качестве значения принимает натуральные числа и задает изначально видимое количество вариантов раскрывающегося списка. Если значение атрибута будет больше единицы, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы пользователь смог увидеть, что есть еще варианты для просмотра.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/select

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
  <form action="php/reg.php" method="POST" name="reg_form">
     
    Укажите спортивный разряд: <br><br>     
    <!-- Создаем раскрывающийся список -->
    <select name="category">
      <option value="0">отсутствует</option>
      <option value="3" label="3-й">3-й взрослый</option>
      <option value="2" label="2-й">2-й взрослый</option>
      <option value="1" label="1-й">1-й взрослый</option>
      <option value="kms">КМС</option>
      <option value="ms">МС</option>
      <option value="msmk">МСМК</option>
    </select> <br><br> 
     
    Выберите виды спорта: <br><br>
    <!-- Изначально будет видно три пункта, но выбирать можно -->
    <!-- сразу несколько пунктов при нажатой клавише ctrl -->
    <select name="sport[]" size="3" multiple>
      <option value="0" selected>Бокс</option>
      <option value="1">Вольная борьба</option>
      <option value="2">Дзюдо</option>
      <option value="3">Каратэ</option>
      <option value="4">Таэквондо</option>
    </select> <br><br> 
     
    <button type="submit" disabled>Отправить</button>
  </form>	
	
</body>
</html>

Пример №1