Тег <select>

Описание

Тег <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

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

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

Обязателен.

Пример. Использование тега <select>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 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>

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
3	1	3.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Строчные элементы. | Формы.