Тег <select>

Internet Explorer

Chrome

Opera

Safari

Firefox

Android

iOS

3.0+

1.0+

4.0+

1.0+

1.0+

1.0+

1.0+

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

                                    

                                  

Список множественного выбора

Раскрывающийся список

Синтаксис

<select>

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

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

</select>

Атрибуты

accesskey

Позволяет перейти к списку с помощью некоторого сочетания клавиш.

autofocus

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

disabled

Блокирует доступ и изменение элемента.

form

Связывает список с формой.

multiple

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

name

Имя элемента для отправки на сервер или обращения через скрипты.

required

Список обязателен для выбора перед отправкой формы.

size

Количество отображаемых строк списка.

tabindex

Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

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

Обязателен.

Пример

<!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>

Строчные элементы

Формы