Перейти к содержанию

<select>

Тег <select> (от англ. select — выбрать) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

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

Демо

Формы

Синтаксис

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

Закрывающий тег обязателен.

Атрибуты

autofocus

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

disabled

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

form

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

multiple

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

name

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

required

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

size

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

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

autofocus

Атрибут autofocus устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.

Синтаксис

1
2
3
<select autofocus>
    ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

disabled

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

Синтаксис

1
2
3
<select disabled>
    ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

form

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>.

Синтаксис

1
2
3
<select form="<идентификатор>">
    ...
</select>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

Значение по умолчанию

Нет.

multiple

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[], к примеру.

Синтаксис

1
2
3
<select multiple>
    ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения списка на сервере.

Синтаксис

1
2
3
<select name="<имя>">
    ...
</select>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <select> по имени соблюдайте ту же форму написания, что и в атрибуте name.

Значение по умолчанию

Нет.

required

Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

1
2
3
<select required>
    ...
</select>

Значения

Нет.

Значение по умолчанию

По умолчанию атрибут required выключен.

size

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу <select> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

1
2
3
<select size="<число>">
    ...
</select>

Значения

Любое целое положительное число.

Значение по умолчанию

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Значения ARIA role

  • <select> (без атрибута multiple и без атрибута size со значением больше 1) — role=combobox
  • <select> (с атрибутом multiple или с атрибутом size со значением больше 1) — role=listbox

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

Ссылки

Комментарии