✅ Спадний список у HTML - Приклади того, як працює спадний список у HTML

Вступ до випадаючого списку в HTML
Наведіть курсор на демонстраційне меню

Вступ до випадаючого списку в HTML

Випадаючий список у HTML є важливим елементом для побудови форми або для відображення списку вибору, з якого користувач може вибрати одне або кілька значень. Цей вид списку відбору в HTML відомий як спадний список. Він створюється за допомогою тегу зі значенням. Це дозволяє користувачеві вибрати будь-який варіант за своїм вибором. Завжди корисним є використання випадаючого списку, коли ви знаєте значення параметра, тож ви можете встановити будь-яке значення як атрибут за замовчуванням, а інші - як параметри.

Давайте подивимося, як створюватиметься спадний список:

Синтаксис:

option1 option2 option3 option3

Приклад:

Red Purple

Як показано у наведеному вище синтаксисі, це тег, який використовується для створення спадного списку. тег, укладений у тег вибору, є значенням атрибутів або атрибутів для списку вибору, значення буде відображати вибраний варіант погоди, вимкнено або з будь-якими іншими властивостями.опція1, 2…. буде іменем. За допомогою CSS ми можемо надавати ефекти нашому списку вибору, в змозі встановлювати такі позиції, як відносні, абсолютні тощо, здатні встановлювати ширину та виконувати багато інших функцій.

Встановлення кольору або кольору фону на наведення курсора за допомогою коду:

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

Позиція для випадаючого списку визначається на два значення: позиція: відносна, яка використовується для відображення вмісту списку прямо під кнопкою списку вибору. За допомогою позиції: абсолютна;

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

Синтаксис:

option1 option2

Приклад:

Math English Science Biology

Як працює спадний список у HTML?

Після вивчення синтаксису зараз ми побачимо, як саме випадаючий список працюватиме в HTML. Є кілька атрибутів, які використовуються в тегу, які є наступними:

Ім'я: Цей атрибут корисний, щоб призначити ім'я елементу управління, яке буде надіслано серверу для ідентифікації та прийняття необхідного значення.
Множина: Якщо для атрибута встановлено значення "кілька", то користувач може вибрати декілька значень зі списку вибору.
Size: Атрибут Size використовується для визначення конкретного розміру вікна прокрутки навколо спадного списку. Це також корисно для відображення кількох видимих варіантів зі списку.
Значення: Цей атрибут відображатиме параметр у вибраному списку вибору.
Вибрано: Вибрані атрибути дозволяють в самих початкових точках завантаження сторінки показувати вже вибраний список зі списку.
Label: Атрибути мітки працюють як інший підхід до значення параметрів маркування.
Інваліди: Якщо ми хочемо показати випадаючий список з опцією відключення, можливо, використовуючи атрибут відключення у списку вибору HTML.
onChange: Кожен раз, коли користувач збирається вибрати когось із випадаючого списку, тоді подія запускається при виборі елемента.
onFocus: Кожен раз, коли користувач наводить мишу у списку вибору, щоб вибрати опцію зі списку, вона запускає подію для вибору елемента.
Форма: Цей атрибут використовується для визначення однієї або декількох форм, які пов'язані з полем вибору.
вимкнено: ми повинні тримати відключений список від користувача за допомогою цього атрибута.
обов'язково: Щоразу, коли заповнюючи якусь форму, ми хочемо показати, що це поле є необхідним для вибору будь-якого значення зі свого списку перед фактичною формою відправки, тому в цьому випадку ми визначаємо, що користувачеві потрібно вибрати одне значення зі списку.

Приклади HTML-коду

Наступні приклади покажуть, як саме буде використовуватися спадний список:

Приклад №1

Код:

DropDown List

Сім чудес світу

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

Наведений вище приклад містить різні параметри, такі як відключені, вибрані, необхідні тощо, які відображаються на екрані виводу.

Вихід:

Приклад №2

Код:

Mumbai Pune Nagpur Solapur Latur

Тут можна вибрати кілька варіантів. Натисніть клавішу ctrl і виберіть одночасно кілька варіантів.

функція multipleFunc () (
document.getElementById ("multiselectdd"). multiple = 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;)

Наведіть курсор на демонстраційне меню

HTML-елемент
Посилання
Випадаючий список
Поле введення
Кнопка
Радіо Кнопки

Спадний список буде відкритий на ефект наведення курсора.

Вихід:

Висновок

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

Спадний список у HTML - Приклади того, як працює спадний список у HTML