| Элемент | ||||||
| <select> | 3+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
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 Элементы формы