78. Раскрывающийся список на HTML
Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!
Что такое раскрывающийся список?
Благодаря тегу <select> появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select> должен быть помещен в форму (тег <form> ). Далее пример:
Код HTML
<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Какие есть атрибуты у тега select?
Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил).
Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:
Код HTML
<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Второй атрибут required, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять.
Далее пример применения атрибута required:
Код HTML
<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Третий атрибут size, с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:
Код HTML
<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Код HTML
<form method = "POST">
<select required size = "3" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>
Похожие уроки и записи блога
Написание модулей в PythonЗнакомство с Python
Первое знакомство с PythonЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Урок 3.
Генерация SSH-ключа для работы с GitHubБлог
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Типы данных в PythonЗнакомство с Python
Модули в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Погружение в PythonЗнакомство с Python
Предыдущий урок «77. Метки в HTML формах — LABEL» Следующий урок «79. Для чего нужен тег KEYGEN»
Тег select — выпадающий список
Тег select создает выпадающий список
для использования в HTML формах.
Отдельный пункт списка должен храниться в
теге option.
Атрибуты
| Атрибут | Описание |
|---|---|
multiple | Наличие данного атрибута создает мультиселект —
выпадающий список, в котором можно выбрать несколько пунктов, зажав
клавишу контрол (Ctrl) или выделив их мышкой. Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>.  |
name | Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде. |
Пример
Давайте посмотрим, как работает выпадающий список:
<select>
<option>Москва</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример
Давайте ширину выпадающего списка сделаем
равной ширине самого большого элемента (если
она не будет явно указана с помощью CSS свойства width):
<select>
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример .
Выбор по умолчанию А теперь давайте попробуем выбрать по умолчанию
город Минск. Сделаем это с помощью атрибута selected:
<select>
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Мультиселект
Давайте теперь превратим обычный select в мультиселект с помощью атрибута multiple.
Для этого зажмем клавишу контрол (ctrl)
и, не отпуская ее, можем выбрать несколько
пунктов выпадающего списка. Или же просто
выделим мышкой несколько пунктов (зажмием
левую кнопку и выделяем).
<select multiple name="city[]">
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример .
Несколько значений по умолчанию в мультиселектеА теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:
<select multiple name="city[]">
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option selected>Лондон</option>
</select>
:
Смотрите также
- атрибут
selected,
который задает выбранный по умолчанию пункт списка - тег
optgroup,
который группирует пункты списка - тег
datalist,
который создает выпадающий список
Атрибут размера HTML select
❮ Тег HTML
Пример
Выпадающий список с тремя видимыми параметрами:
Попробуйте сами »
Определение и использование
Атрибут size указывает количество видимых параметров в раскрывающемся списке.
Если значение атрибута размера больше 1, но меньше
общее количество опций в списке, браузер добавит полосу прокрутки к
указать, что есть дополнительные параметры для просмотра.
Поддержка браузера
| Атрибут | |||||
|---|---|---|---|---|---|
| размер | Да | Да | Да | Да | Да |
Примечание: В Chrome и Safari этот атрибут может не работать, т.к.
ожидается для size="2" и размер = "3" .
Синтаксис
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
9 Top Examples6
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Раскрывающийся список — Материализация
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| выравнивание | Строка | ‘левый’ | Определяет границу, по которой выравнивается меню. |
| автотриггер | Булево значение | правда | Если true, автоматически фокусировать раскрывающийся список для клавиатуры. |
| ограничение ширины | Булево значение | правда | Если true, ограничить ширину до размера активатора раскрывающегося списка. |
| контейнер | Элемент | ноль | Укажите элемент, который будет ограничивающим контейнером раскрывающегося списка. |
| крышка триггера | Булево значение | правда | Если false, раскрывающийся список будет отображаться под триггером. |
| закрытьОнклик | Булево значение | правда | Если true, закрывать раскрывающийся список при щелчке элемента. |
| наведение | Булево значение | ложь | Если true, раскрывающийся список будет открываться при наведении. |
| Продолжительность | Номер | 150 | Продолжительность перехода введите в миллисекундах. |
| outDuration | Номер | 250 | Продолжительность выхода в миллисекундах. |
| onOpenStart | Функция | ноль | Функция вызывается при открытии раскрывающегося списка. |
| на OpenEnd | Функция | ноль | Функция вызывается после завершения ввода раскрывающегося списка. |
| onCloseStart | Функция | ноль | Функция вызывается, когда раскрывающийся список начинает закрываться. |
| onCloseEnd | Функция | ноль | Функция вызывается, когда раскрывающийся список завершает работу. |
| Имя | Тип | Описание |
|---|---|---|
| эль | Элемент | Элемент DOM, которым был инициализирован подключаемый модуль. |
| опции | Объект | Параметры, с которыми был инициализирован экземпляр. |
| идентификатор | Строка | ID выпадающего элемента. |
| раскрывающийся списокEl | Элемент | Элемент DOM раскрывающегося списка. |
| isOpen | Булево значение | Если раскрывающийся список открыт. |