HTML тег <select>

Элемент <select> (от англ. "select" ‒ «выбирать») используется для создания раскрывающегося списка, который появляется при щелчке мышью по элементу формы и позволяет посетителю сайта выбрать один из предопределенных вариантов.

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

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

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

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

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Закрывающий тег

Обязателен.

Атрибуты

autofocusHTML5
Устанавливает, что список получает фокус после загрузки страницы.

disabled
Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом.

formHTML5
Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

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

name
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.

requiredHTML5
Указывает, что пользователь должен выбрать значение перед отправкой формы.
size
Определяет число видимых опций в выпадающем списке.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

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

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

Выпадающий список с четырьмя вариантами выбора:

Пример HTML:

Попробуй сам
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

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


Учебник HTML

HTML уроки: HTML Элементы формы

HTML Элементы



Contema