✅ Раскрывающийся список в HTML - Примеры того, как выпадающий список работает в HTML

Введение в выпадающий список в HTML
Hover Dropdown Demo

Введение в выпадающий список в HTML

Раскрывающийся список в HTML является важным элементом для построения формы или для отображения списка выбора, из которого пользователь может выбрать одно или несколько значений. Этот вид списка выбора в HTML известен как выпадающий список. Он создан с использованием тега со значением. Это позволяет пользователю выбрать любой вариант по своему выбору. Всегда полезно использовать раскрывающийся список, когда вы знаете значение параметра, поэтому можно установить любое значение в качестве атрибута по умолчанию, а другие будут в качестве значений параметра.

Давайте посмотрим, как будет создан выпадающий список:

Синтаксис:

option1 option2 option3 option3

Пример :

Red Purple

Как показано в приведенном выше синтаксисе, это тег, используемый для создания выпадающего списка. тег, заключенный в тег select, представляет собой значение атрибута или атрибуты для списка выбора, это значение будет отображать, выбран ли параметр погоды, отключен или с другими свойствами. Параметр1, 2…. будет именем. С помощью CSS мы можем придать эффекты нашему списку выбора, умеем устанавливать позиции, такие как относительные, абсолютные и т. Д., Можем устанавливать ширину и выполнять множество других функций.

Установка цвета фона или цвета для наведения с помощью кода:

.dropdown a:hover( Background-color: color_name; )

Положение раскрывающегося списка определяется двумя значениями: position: относительное, которое используется для отображения содержимого списка точно под кнопкой выбора списка. С помощью позиции: абсолютная;

Минимальная ширина является одним из свойств, используемых для задания определенной ширины выпадающего списка. Мы можем установить его, пока наша кнопка выпадающего, установив ширину на 100%. Выше синтаксис определен для выбора одного атрибута, теперь мы увидим, как несколько вариантов будут выбраны из списка элементов.

Синтаксис:

option1 option2

Пример :

Math English Science Biology

Как работает выпадающий список в HTML?

Изучив синтаксис, теперь мы увидим, как именно работает раскрывающийся список в HTML. В теге используются следующие атрибуты:

Имя: Этот атрибут полезен для присвоения имени элементу управления, который будет отправляться на сервер для идентификации, и принимать требуемое значение.
Несколько: если для атрибута установлено значение «несколько», пользователь может выбрать несколько значений из списка выбора.
Размер: Атрибут размера используется для определения прокручиваемого блока определенного размера вокруг выпадающего списка. Это также полезно для отображения нескольких видимых опций из списка.
Значение: этот атрибут будет отображать выбранную опцию в списке выбора.
Выбрано: выбранные атрибуты включаются в самых начальных точках загрузки страницы для отображения уже выбранного элемента списка из списка.
Метка: Атрибуты метки работают как еще один подход к значению меток.
Отключено: Если мы хотим отобразить раскрывающийся список с параметром отключения, то это возможно с помощью отключенного атрибута в списке выбора HTML.
onChange: всякий раз, когда пользователь собирается выбрать кого-либо из выпадающего списка, событие вызывается при выборе элемента.
onFocus: всякий раз, когда пользователь наводит курсор мыши в списке выбора, чтобы выбрать опцию из списка, он вызывает событие для выбора элемента.
Форма: Этот атрибут используется для определения одной или нескольких форм, связанных с полем выбора.
disabled: с помощью этого атрибута мы должны отключить наш раскрывающийся список от пользователя.
Требуется: при заполнении какой-либо формы мы хотим показать, что это поле необходимо для выбора любого значения из его списка до фактической отправки формы, поэтому в этом случае мы определяем, что пользователь должен выбрать любое одно значение из списка.

Примеры кода HTML

Следующие примеры покажут, как именно будет использоваться раскрывающийся список:

Пример № 1

Код:

DropDown List

Семь чудес света

Тадж Махал
Великая китайская стена
Храм Христа Искупителя
Мачу-Пикчу
Чичен-Ица
Римский Колизей
Petra

Приведенный выше пример содержит различные параметры, такие как отключенный, выбранный, обязательный и т. Д., Которые отображаются на экране вывода.

Выход:

Пример № 2

Код:

Mumbai Pune Nagpur Solapur Latur

Здесь можно выбрать несколько опций. Пожалуйста, нажмите клавишу Ctrl и выберите несколько опций одновременно.

function multipFunc () (
document.getElementById ("multiselectdd"). множественный = true;
)

Как показано на скриншоте ниже, чтобы выбрать несколько опций из выпадающего списка, нажмите данную кнопку и, нажав CTRL, выберите несколько опций.

Выход:

Пример № 3

Код:

.dropdownbtn ( background-color: black; color: white; padding: 12px; font-size: 12px; ) .dropdowndemo( position:fixed; display: block; ) .dropdownlist-content ( display: none; position: absolute; background-color: greenyellow; min-width: 120px; z-index: 1; ) .dropdownlist-content a ( color: darkblue; padding: 14px 18px; display: block; ) .dropdownlist-content a:hover (background-color: lightcyan;) .dropdowndemo:hover .dropdownlist-content (display: block;) .dropdowndemo:hover .dropdownbtn (background-color: blue;)

Hover Dropdown Demo

HTML формы Элемент
связи
Раскрывающийся список
Поле ввода
кнопка
Радио-кнопки

Раскрывающийся список будет открыт при наведении.

Выход:

Вывод

Мы можем сделать вывод, что выпадающий список используется для выбора опции из списка выбора. Он используется для выбора одного или нескольких параметров одновременно. Пользователи могут выбрать опцию из списка по своему выбору, чтобы он стал более удобным для пользователя. Приведенные выше атрибуты используются с тегами выбора для выполнения различных операций выбора в раскрывающемся списке.

Раскрывающийся список в HTML - Примеры того, как выпадающий список работает в HTML