Як зробити випадаючий список в 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.
Випадає список іншими способами
Його можна зробити за допомогою CSS, наприклад, список буде з'являтися при наведенні курсору на елемент сторінки. Відмінні можливості для створення списків надає javascript, роботу якого спрощує бібліотека Jquery. Випадає список, підключений за допомогою цієї бібліотеки, може бути дуже складним, наприклад, каскадним. Тобто при виборі елемента в одному списку з'являється наступний список, наприклад, існує пункт меню «Жіночий одяг» (при наведенні випадають види одягу), потім при виборі одного з видів, наприклад, «Верхній одяг», випадає список з елементами: куртки, парки, пальто, півпальто, шуби і т. п.
Ми поверхнево перерахували основні способи, за допомогою яких можна створити список, що випадає. Зрозуміло, є маса нюансів в HTML, в CSS і в javascript, які дозволяють змінювати функціональність і зовнішній вигляд списків.