Тег HTML выпадающий список
Тег в HTML используется для создания выпадающего списка в HTML форме.
С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).
Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name ), содержащая значение выбранного пункта списка. Если в выбранном пункте списка есть атрибут value , то значением считается его содержимое, в противном случае значением считается содержимое тега .
Синтаксис
Примеры использования выпадающего списка в HTML коде
Ниже представлены 4 основных варианта выпадающих списков HTML.
Простой HTML выпадающий список
HTML код простого выпадающего списка
Выпадающий список с выбором нескольких значений
Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple . Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size .
Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]» .
HTML код выпадающего списка с выбором нескольких значений
Раскрывающийся список с группами пунктов
HTML код раскрывающегося списка с группами пунктов
HTML список обязательный для заполнения (выбора)
Для того, чтобы создать список select , обязательный для заполнения ( список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required , а также добавить внутрь списка первым пунктом с пустым значением атрибута value .
HTML код выпадающего списка обязательного для выбора (заполнения)
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты тега select
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
Логический атрибут. Если указан, делает список неактивным.
Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
Указывает на форму, к которой относится список. Используется, если список находится вне HTML кода формы.
Если список находится внутри тега , то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.
Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.
Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.
Как сделать выпадающий список в html
Тег в HTML используется для создания выпадающего списка в HTML форме. С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором). Пункты выпадающего списка определяются с помощью тега . Тег определяет группы пунктов внутри выпадающего списка HTML.
name="colors"> value="1">Синий value="2" selected>Зеленый value="3">Желтый value="4">Красный value="5">Оранжевый value="6">Черный 
Результат:
CSS Выпадающие списки
Создание выпадающего списка, когда при наведении появляется элемент.
Пример
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
>
.dropdown:hover .dropdown-content display: block;
>
Объяснение примера
HTML) Использовать любой элемент для открытия выпадающего списка, например: элемент a , или a .
Использовать элемент контейнера (например: ) для создания выпадающего списка и всего, того, что угодно вы хотите добавить внутри его.
Оберните элемент вокруг элементов, чтобы правильно расположить выпадающие содержимое с помощью CSS.
CSS) Класс .dropdown использует position:relative , которая необходима, чтобы выпадающее содержимое находилось прямо под выпадающем кнопкой (с помощью position:absolute ).
Класс .dropdown-content содержит фактическое содержимое выпадающего списка. Он скрыт по умолчанию, и будет отображаться при наведении (см. ниже).
Примечание: min-width имеет значение 160 пикселей. Не бойтесь изменить его.
Совет: Если вы хотите, чтобы ширина выпадающего контента была, как выпадающая кнопку , установите width в 100 процентов (и overflow:auto включить прокрутку на маленьких экранах).
Вместо использования границы мы использовали CSS свойство box-shadow для того, чтобы сделать выпадающее меню как «карточку».
Селектор :hover используется для отображения выпадающего меню, при перемещении наведите указатель мыши на кнопку раскрывающегося списка.
Выпадающее меню
Создание выпадающего меню, позволяющего пользователю выбрать параметр из списка:
Выпадающее Меню
Этот пример похож на предыдущий, за исключением того, что мы добавляем ссылки в выпадающем окне и стиль под кнопки в выпадающем стиле:
Пример
/* контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>
/* Выпадающей контент (по умолчанию скрыт) */
.dropdown-content display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменить цвет выпадающих ссылок при наведении */
.dropdown-content a:hover
/* Показать выпадающее меню при наведении */
.dropdown:hover .dropdown-content display: block;
>
/* Изменить цвет фона выпадающего кнопка при отображении выпадающего списка */
.dropdown:hover .dropbtn background-color: #3e8e41;
>
Как создать выпадающий список в форме
Узнайте, как создать выпадающий список в форме и обработать выбор пользователя с помощью HTML и JavaScript!
Алексей Кодов
Автор статьи
1 июня 2023 в 13:26
В процессе создания веб-страницы, иногда возникает потребность добавить выпадающий список в форму. Выпадающие списки являются удобным способом предоставления пользователю возможности выбора из предопределенного набора опций. В этой статье мы рассмотрим, как создать выпадающий список с использованием HTML и немного JavaScript для обработки выбора пользователя.
Создание выпадающего списка с помощью HTML
Для создания выпадающего списка в HTML используется тег в сочетании с тегом . Тег определяет контейнер для списка, а тег используется для определения каждого элемента списка.
Пример создания выпадающего списка:
В этом примере создается форма с выпадающим списком, содержащим три опции: яблоко, банан и апельсин. Значения опций ( value ) будут отправлены на сервер при отправке формы.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Обработка выбора пользователя с помощью JavaScript
Чтобы сделать выпадающий список более интерактивным, можно добавить обработчик событий с использованием JavaScript. В этом примере мы добавим обработчик события change , который будет вызываться при изменении выбранного элемента списка.
function handleFruitChange() В этом примере при изменении выбранного элемента списка вызывается функция handleFruitChange() , которая выводит сообщение с выбранным фруктом.
�� Теперь вы знаете, как создать выпадающий список в форме и обработать выбор пользователя с использованием HTML и JavaScript! Это базовые знания, которые пригодятся при создании веб-страниц с формами. Не забывайте продолжать изучать и экспериментировать с HTML, CSS и JavaScript для создания еще более интересных и функциональных сайтов.
Если вам нужна дополнительная помощь или вы хотите углубить свои знания в веб-разработке, рекомендую посетить