Описание
Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
|
Список множественного выбора |
Раскрывающийся список |
Синтаксис
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Атрибуты
- accesskey — Позволяет перейти к списку с помощью некоторого сочетания клавиш.
- autofocus — Устанавливает, что список получает фокус после загрузки страницы.
- disabled — Блокирует доступ и изменение элемента.
- form — Связывает список с формой.
- multiple — Позволяет одновременно выбирать сразу несколько элементов списка.
- name — Имя элемента для отправки на сервер или обращения через скрипты.
- required — Список обязателен для выбора перед отправкой формы.
- size — Количество отображаемых строк списка.
- tabindex — Определяет последовательность перехода между элементами при нажатии на клавишу
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SELECT</title>
</head>
<body>
<form action="select1.php" method="post">
<p><select size="3" multiple name="hero[]">
<option disabled>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option selected value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>