Тег 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 | не указывается / autofocus |
Логический атрибут. |
| disabled | не указывается / disabled |
Логический атрибут. Если указан, делает список неактивным. Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта). |
| form | id формы |
Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы. Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится. |
| multiple | не указывается / multiple |
Логический атрибут. |
| name | текст |
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте. |
| required | не указывается / required |
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение. Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения. |
| size | число |
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию. Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом. |
Если указан, при загрузке документа фокус будет переведен на список.
Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом 
Тег <select> также поддерживает глобальные HTML атрибуты.
by Lebedev
Как создать в HTML выпадающий список?
Категория: Сайтостроение, Опубликовано: 2017-05-19
Автор: Юлия Гусарь
Приветствую вас, друзья и коллеги!
Очень часто в процессе разработки или доработки сайта возникает необходимость предоставления пользователю выбора, например, различных вариаций товара или услуги, фильтрации доступных опций и так далее. Для решения данных задач можно использовать выпадающие списки.
В этой статье я расскажу вам, как можно сделать на HTML выпадающий список и какие атрибуты можно использовать при его создании.
Навигация по статье:
- Как сделать раскрывающийся список html
- HTML выпадающий список с множественным выбором
- Как задать выбранный пункт по умолчанию
- Как подключить раскрывающийся список html к форме
Как сделать раскрывающийся список html
Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.
Перечень атрибутов для тега <select>:
autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
size – определяет высоту в закрытом состоянии. Задается числовым значением.
form – подключение к форме обратной связи
name – имя, для получения выбранного значения и передачи его в скрипт для обработки
Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>
Атрибуты для тега <option>:
disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.
Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>
Пример самого простого раскрывающегося списка html:
Код:
<select> <option>Опция 1</option> <option>Опция 2</option> </select>
<select> <option>Опция 1</option> <option>Опция 2</option> </select> |
Размер выпадающего элемента, то есть, количество отображаемых элементов зависит от заданного параметра size.
В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.
Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.
HTML выпадающий список с множественным выбором
По умолчанию доступен для выбора только один элемент. Если есть необходимость предоставления множественного выбора, то можно использовать атрибут multiple. Вот пример использования атрибута:
<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select>
<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select> |
Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.
При использовании множественного выбора, атрибут size будет принимать значение, равное количеству пунктов.
Как задать выбранный пункт по умолчанию
В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:
<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select>
<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select> |
Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder.
Как подключить раскрывающийся список html к форме
После того как вы сделаете html выпадающий список, вам нужно будет как-то использовать полученные значения.
Для этого мы можем использовать два атрибута name и form.
Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.
Например:
<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select>
<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select> |
Далее, вы можете использовать полученные данные в php-функции. Например, вот так:
function dataSelect(a) { n = a.count.selectedIndex if(n) alert(«Страна: » + f.count.options[n].value) }
function dataSelect(a) { n = a. if(n) alert(«Страна: » + f.count.options[n].value) } |
count.selectedIndexАтрибут form дает нам возможность подключить наш раскрывающийся список html к какой-либо форме на нашем сайте, в случае если он находится вне тега <form>. В кавычках нужно указать идентификатор формы, к которой мы хотим подключить наш html выпадающий список.
Например:
<select form=»cont-form «> <option value=»2″>2х2</option> <option value=» 3 «>3х3</option> <option value=» 4 «>4х4</option> </select>
<select form=»cont-form «> <option value=»2″>2х2</option> <option value=» 3 «>3х3</option> <option value=» 4 «>4х4</option> </select> |
Где «cont-form» — это ID формы.
Надеюсь, данная статья поможет вам разобраться, как сделать в html выпадающий список для своего сайта.
Если вам понравилась данная статья, не забудьте поделиться ею в социальных сетях и оставить комментарий. Так же вы можете заглянуть на мой YouTube-канал, где найдете много интересного материала по созданию сайтов и интернет магазинов.
Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!
С уважением Юлия Гусарь
раскрывающихся списков CSS | HTML Dog
Довольно распространенным видом навигации является раскрывающееся меню , в котором списки поднавигации появляются только тогда, когда курсор проходит по ссылке.
HTML Dog имеет долгую историю с раскрывающимися списками — мы выделили популярный метод Suckerfish Dropdowns еще в 2003 году. Однако с тех пор стандарты и браузеры прошли долгий путь, и теперь мы можем безопасно использовать гораздо более простую технику, используя CSS без необходимости для любого JavaScript.
Многоуровневые выпадающие списки. Перед тем, как начать, подумайте, будет ли разумнее применять раскрывающиеся списки на вашем сайте.
Хотя скрытие основной части навигации может сделать дизайн более чистым, это добавляет пользователю дополнительный уровень сложности при переходе к этим скрытым ссылкам. Это не будет существенной проблемой для большинства, но будет для тех, кто не использует или не может использовать указывающее устройство, такое как мышь. Это может быть случай для людей с двигательными или зрительными нарушениями или для тех, кто использует мобильные устройства с сенсорным экраном. Вы должны, по крайней мере, подумать о том, как предоставить этим пользователям возможность навигации (см. пункты об использовании ссылок позже). Если вы решили использовать раскрывающиеся списки, давайте двигаться вперед и применять их наилучшим образом…
Ссылка на нас! Если вы нашли HTML Dog полезным, рассмотрите возможность ссылки на нас.
HTML: Красиво вложенные списки
Как и любая хорошая навигация, списка ссылок — лучший вариант для структурирования раскрывающихся списков.
Так как мы хотим, чтобы один элемент раскрывал группу подэлементов, нам наверняка нужно вложенных списка — то есть список списков:
<ул>
Итак, у нас есть «Птицы» и «Млекопитающие» в качестве предметов верхнего уровня, а «Крысы», «Однопроходные» и так далее в качестве предметов второго уровня, подкатегории.
Использовать ссылки. Всегда используйте ссылки. Если вас больше всего интересуют подкатегории (например, «Крысоловы» и «Однопроходные»), подумайте, по крайней мере, о том, чтобы основные элементы (например, «Птицы» и «Млекопитающие») ссылались на страницу со стандартной навигацией.
на страницы подкатегорий. Основная причина этого — доступность — как уже отмечалось, посетители вашей страницы не всегда будут использовать указывающее устройство (которое, конечно, требуется для наведения и открытия подменю).
CSS: самое необходимое
Чтобы настроить все это визуально, давайте обнулим отступы по умолчанию (и поля для старых браузеров) списков:
ул {
заполнение: 0;
маржа: 0;
}
Далее, для каждого элемента списка мы хотим расположить их горизонтально. Забегая вперед, мы также хотим указать, что источником для позиционирования всех подсписков является их родительский элемент списка:
.
ли {
дисплей: встроенный;
положение: родственник;
}
Теперь займемся списками внутри списка. Мы хотим расположить их абсолютно, размещая их поверх всего, и мы хотим их скрыть:
уль уль {
положение: абсолютное;
дисплей: нет;
}
Для поддержки старых браузеров вы также можете явно расположить подсписки, добавив к этому слева: 0 и сверху: 100% .
Наконец, чтобы показать эти подсписки при наведении курсора на основной элемент списка:
ли: наведите ул {
дисплей: блок;
}
Первый сопровождающий пример показывает это в действии вместе с поясняющими встроенными комментариями (см. исходный код).
Многоуровневые раскрывающиеся списки
Размещение более чем одного уровня раскрывающегося меню потребует большего вложения списка:
д.Теперь, чтобы обрабатывать эти новые под-подсписки немного по-другому, мы хотим, чтобы они отображались сбоку от своих элементов родительского списка, а не под ними:
ул уль уль {
слева: 100%;
сверху: 0;
}
Нужна небольшая поправка. В его нынешнем виде будут показаны все списка потомков элемента списка, на который наведен курсор. Таким образом, при наведении курсора на «Млекопитающие» в этом примере будут показаны не только «Однопроходные», «Сумчатые» и «Плацентарные», но и все виды сумчатых — «Оппоссумы» и так далее. Нам нужен только первый потомок — детей (не внуков) — показать. Поэтому мы изменяем li:hover ul , вставляя дочерний селектор :
li: наведите курсор > ул {
дисплей: блок;
}
Другие базовые изменения, которые вы, возможно, захотите внести, включают плавающие элементы списка вместо использования display: inline .
Затем вы можете контролировать такие вещи, как ширина. Во втором сопровождающем живом примере применяются многоуровневые раскрывающиеся списки и вносятся некоторые из этих основных улучшений.
Очень красивая
Третий сопровождающий пример немного украшает ситуацию. Варианты презентаций, конечно, за вами, но это дает пищу для размышлений. Выделение списков родителей — это всегда хороший способ дать дополнительную подсказку о том, где вы находитесь. Переходы предлагают дополнительное преимущество, заключающееся в том, что выпадающие списки остаются немного дольше, уменьшая проблему неистово исчезающих списков, когда курсор на мгновение выходит за границы выпадающего списка.
Выпадающий список в 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 {цвет фона: синий;}
<тело>
Демонстрация раскрывающегося списка
<дел>
<дел>
Ссылки
Раскрывающийся список
Поле ввода
Кнопка
Переключатели
dropdowndemo{
положение: фиксированное;
дисплей: блок;
}
.dropdownlist-контент {
дисплей: нет;
положение: абсолютное;
цвет фона: зелено-желтый;
минимальная ширина: 120 пикселей;
z-индекс: 1;
}
.dropdownlist-контент {
цвет: темно-синий;
отступ: 14px 18px;
дисплей: блок;
}
.dropdownlist-content a: hover {фоновый цвет: светло-голубой;}
.dropdowndemo: hover .dropdownlist-content {display: block;}
.dropdowndemo: hover .dropdownbtn {цвет фона: синий;}
<тело>
