Тег | htmlbook.ru
| 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
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!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>Строчные элементыФормы
- Поле со списком
Тег HTML выпадающий список
Рейтинг: 4 из 5, голосов 25
28 декабря 2019 г.
Тег <select> в HTML используется для создания выпадающего списка в HTML форме.
С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).
Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.
Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.
Синтаксис
<select>элементы списка</select>
Примеры использования выпадающего списка <select> в HTML коде
Ниже представлены 4 основных варианта выпадающих списков HTML.
Простой HTML выпадающий список
СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный
HTML код простого выпадающего списка
<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>
Выпадающий список с выбором нескольких значений
Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.
Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».
NissanToyotaBMWWolksvagenSkodaMercedes-Benz
HTML код выпадающего списка с выбором нескольких значений
<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>
Раскрывающийся список с группами пунктов
Пункты в HTML списке select можно группировать с помощью тега <optgroup>.
Название группы не доступно для выбора, служит для удобства пользователей.
МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель
HTML код раскрывающегося списка с группами пунктов
<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>
HTML список обязательный для заполнения (выбора)
Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.
Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный
HTML код выпадающего списка обязательного для выбора (заполнения)
<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>
Поддержка браузерами
| Тег | |||||
| <select> | Да | Да | Да | Да | Да |
Атрибуты тега select
| Атрибут | Значения | Описание |
|---|---|---|
| autofocus |
Логический атрибут. |
|
| disabled | не указывается / disabled |
Логический атрибут. Если указан, делает список неактивным. Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта). |
| form | id формы |
Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы. Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится. |
| multiple | не указывается / multiple |
Логический атрибут. |
| name | текст |
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте. |
| required | не указывается / required |
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение. Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения. |
| size | число |
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию. Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом. |
Если указан, при загрузке документа фокус будет переведен на список.
Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом 
Тег <select> также поддерживает глобальные HTML атрибуты.
by Lebedev
Выпадающий список — Материализация
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| выравнивание | Строка | ‘левый’ | Определяет край, по которому выравнивается меню. |
| автоматический триггер | Логическое значение | правда | Если true, автоматически фокусировать раскрывающийся список для клавиатуры. |
| ограничение ширины | Логическое значение | правда | Если true, ограничить ширину до размера активатора раскрывающегося списка. |
| контейнер | Элемент | ноль | Укажите элемент, который будет ограничивающим контейнером раскрывающегося списка. |
| крышка триггера | Логическое значение | правда | Если false, раскрывающийся список будет отображаться под триггером. |
| закрытьОнклик | Логическое значение | правда | Если true, закрывать раскрывающийся список при щелчке элемента. |
| наведение | Логическое значение | ложь | Если true, раскрывающийся список будет открываться при наведении. |
| Продолжительность | Номер | 150 | Продолжительность перехода введите в миллисекундах. |
| outDuration | Номер | 250 | Продолжительность выхода в миллисекундах. |
| на OpenStart | Функция | ноль | Функция вызывается при открытии раскрывающегося списка. |
| на OpenEnd | Функция | ноль | Функция вызывается после завершения ввода раскрывающегося списка. |
| onCloseStart | Функция | ноль | Функция вызывается, когда раскрывающийся список начинает закрываться. |
| при закрытии конца | Функция | ноль | Функция вызывается после закрытия выпадающего списка. |
| Имя | Тип | Описание |
|---|---|---|
| эль | Элемент | Элемент DOM, которым был инициализирован подключаемый модуль. |
| опции | Объект | Параметры, с которыми был инициализирован экземпляр. |
| идентификатор | Строка | ID выпадающего элемента. |
| раскрывающийся списокEl | Элемент | Элемент DOM раскрывающегося списка. |
| открыт | Логическое значение | Если раскрывающийся список открыт. |
| isScrollable | Логическое значение | Если содержимое раскрывающегося списка можно прокручивать. |
| focusIndex | Номер | Индекс элемента в фокусе. |
- Введение
- Инициализация
- Опции
- Методы
- Характеристики
Выпадающий список в HTML | Примеры того, как работает выпадающий список в HTML
Выпадающий список в HTML является важным элементом для создания формы или для отображения списка выбора, из которого пользователь может выбрать одно или несколько значений. Этот тип списка выбора в HTML известен как раскрывающийся список. Он создается с помощью тега
Синтаксис раскрывающегося списка в HTML
Давайте посмотрим, как будет создан раскрывающийся список:
Синтаксис:
Пример:
Как показано в приведенном выше синтаксисе, — это тег, используемый для создания выпадающего списка. Тег
Установка цвета фона или цвета при наведении с помощью кода:
.dropdown a:hover{
Цвет фона: color_name;
} Позиция раскрывающегося списка определяется двумя значениями: position: относительное значение, которое используется для отображения содержимого списка прямо под кнопкой выбора списка. С помощью позиции: абсолютной;
Минимальная ширина — это одно из свойств, используемых для задания определенной ширины раскрывающемуся списку. Мы можем установить его такой же длины, как и наша раскрывающаяся кнопка, установив ширину на 100%. Приведенный выше синтаксис определен для выбора одного атрибута; теперь мы увидим, как несколько вариантов будут выбраны из списка элементов.
Синтаксис:
<выбрать несколько>
Пример:
Как раскрывающийся список работает в HTML?
Изучив синтаксис, мы увидим, как именно выпадающий список будет работать в HTML.
В теге
- Имя: Этот атрибут полезен для присвоения имени элементу управления, который будет отправлен на сервер для идентификации и принять требуемое значение.
- Несколько: Если для атрибута установлено значение «несколько», пользователь может выбрать несколько значений из списка выбора.
- Размер: Атрибут размера используется для определения поля прокрутки определенного размера вокруг раскрывающегося списка. Это также полезно для отображения нескольких видимых опций из списка.
- Значение: Этот атрибут показывает, что опция в списке выбора выбрана.
- Выбранные атрибуты позволяют в самых начальных точках загрузки страницы показывать уже выбранный элемент списка из списка.
- Метка: Атрибуты метки работают как еще один подход к значению опций маркировки.
- Отключено: Если мы хотим показать раскрывающийся список с опцией отключения, можно использовать отключенный атрибут в списке выбора HTML.
- onChange: Всякий раз, когда пользователь собирается выбрать любой параметр из раскрывающегося списка, событие запускается при выборе элемента.
- onFocus: Всякий раз, когда пользователь наводит указатель мыши на список выбора, чтобы выбрать параметр из списка, он запускает событие для выбора элемента.
- Форма: Этот атрибут используется для определения одной или нескольких форм, связанных с полем выбора.
- disabled: С помощью этого атрибута мы должны держать наш раскрывающийся список недоступным для пользователя.
- required: Всякий раз, заполняя какую-либо форму, мы хотим показать, что это поле необходимо для выбора любого значения из его списка перед фактической отправкой формы, поэтому в этом случае мы определяем, что пользователь должен выбрать любое значение из списка. список.
Примеры HTML-кода
В следующих примерах показано, как именно будет использоваться раскрывающийся список:
Пример №1
Код:
Выпадающий список <тело>Семь чудес света
<форма> <выберите имя = "раскрывающийся список">
Приведенный выше пример содержит различные параметры, такие как отключено, выбрано, требуется и т.
д., которые отображаются на экране вывода.
Вывод:
Пример #2
Код:
<тело> <форма> <выбрать>Здесь можно выбрать несколько вариантов. Нажмите клавишу Ctrl и выберите несколько вариантов одновременно.
<скрипт> функцияmultiFunc() { document.getElementById("multiselectdd").multiple = true; }
Как показано на снимке экрана ниже, выберите несколько параметров из раскрывающегося списка, нажмите данную кнопку и выберите несколько параметров, нажав CTRL.
Вывод:
Пример #3
Код:
<голова>
<стиль>
.dropdownbtn {
цвет фона: черный;
белый цвет;
отступ: 12px;
размер шрифта: 12px;
}
.
dropdowndemo{
положение: фиксированное;
дисплей: блок;
}
.dropdownlist-контент {
дисплей: нет;
положение: абсолютное;
цвет фона: зелено-желтый;
минимальная ширина: 120 пикселей;
z-индекс: 1;
}
.dropdownlist-контент {
цвет: темно-синий;
отступ: 14px 18px;
дисплей: блок;
}
.dropdownlist-content a: hover {фоновый цвет: светло-голубой;}
.dropdowndemo: hover .dropdownlist-content {display: block;}
.dropdowndemo: hover .dropdownbtn {цвет фона: синий;}
<тело>
Демонстрация раскрывающегося списка
<дел>
<дел>
Ссылки
Раскрывающийся список
Поле ввода
Кнопка
Переключатели
