Як зробити випадаючий список в html
Найпростіший випадає в HTML легко створити, використовуючи тег select. Це тег-контейнер, в нього вкладаються теги option - саме вони задають елементи списку.
Є кілька варіантів списків, які можна зробити за допомогою тега select: список (варіанти випадають після кліка на основному полі або наведення на нього курсора) і список множинного вибору - в ньому користувач може вибрати кілька пунктів. Перші більш поширені, вони є значущим елементом навігації сучасних сайтів. Список, що випадає множинного вибору можна застосувати, наприклад, в каталогах, де потрібно вибрати кілька характеристик товару.
Змінювати зовнішній вигляд і властивості списків можна за допомогою універсальних і спеціальних атрибутів.
Атрибути тега select
1. Multiple - задає множинний вибір.
2. Size - задає кількість видимих рядків у списку, тобто висоту. І тут все залежить від того, присутній атрибут multiple чи ні. Якщо так, і ви не вказуєте size, то при наявності multiple користувач побачить всі можливі варіанти вибору, якщо ж multiple відсутня, то показана буде всього один рядок, а інші відвідувач зможе прочитати, коли натисне на значок ліфта з правого боку. Якщо ж висота size задана і вона буде меншою за кількість варіантів, то справа з'явиться смуга прокрутки.
3. Name - ім'я. Список, що випадає може обійтися і без нього, але воно може бути необхідним для взаємодії з програмою-обробником на сервері. Як правило, ім'я все-таки вказують.
Тег select не має обов'язкових атрибутів на відміну від тега option.
Атрибути вкладеного тега option
- Selected - призначений для виділення пункту списку. Користувач зможе виділяти більше одного пункту, якщо заданий атрибут multiple (див. Вище).
- Value - значення. Цей атрибут обов'язковий. Веб-сервер повинен розуміти, які саме пункти списку вибрав користувач.
- Label. За допомогою цього атрибута можна скорочувати занадто довгі елементи списків. Наприклад, на екран буде виводитися «Мілан», замість зазначеного в тезі option «Мілан - адміністративний центр Ломбардії. Північна Італія ». Цей атрибут також використовується для угруповання пунктів в списку.
Що стосується ширини списку, то вона встановлюється за умовчанням по довжині самого широкого тексту в списку. Зрозуміло, ширину можна змінювати за допомогою стилів HTML.
Список, що випадає іншими способами
