Як зробити випадаючий список

На сторінках сайтів в мережі дуже часто присутні списки, що випадають. Їх використовують для того, щоб згрупувати однотипні значення, якщо треба заощадити місце на сторінці, або щоб при заповненні будь-якої форми дати відвідувачеві можливість вибрати один пункт з декількох, або щоб організувати компактне меню і т.д. Розглянемо - як робиться випадає перелік.
Як зробити випадаючий список
Всі елементи сторінки сайту створюються браузером, який читає з надісланого йому сервером коду що саме і де саме на цій сторінці треба розмістити. Цей код мови HTML (HyperText Markup Language - «мова розмітки гіпертексту») «тегів», які описують тип, зовнішній вигляд і розташування елементів веб-сторінки. Стандартний випадає перелік створюється браузером, якщо він зустрічає в коді сторінки тег select. Виглядає він так: Тут "name" - Це «атрибут» тега select, який містить ім`я саме цього списку. кожен випадає перелік на сторінці має власне ім`я. Крім імені можуть бути зазначені й інші атрибути списку, наприклад кольору фону і тексту вказується в атрибуті style: Вміст списку (рядки) перераховуються в інших тегах - option: рядок перваяУ тега option повинен бути атрибут value - значення, яке буде передано, коли відвідувач зробить свій вибір і відправить його на сервер. Зверніть увагу - саме значення тега value буде відправлено, а не те, що відвідувач побачить в випадаючому списку ("рядок перша"). І у тега option можуть бути інші атрибути крім value, один з них - selected. Цей атрибут вказує, що цей рядок списку повинна бути обрана за замовчуванням, тобто саме вона буде видна при закритому списку: друга строкаКаждой рядку списку відповідає окремий тег option і всі вони повинні розташовуватися всередині контейнера select, тобто до закриває тега: рядок перша
другий рядок
це третя строкаА контейнер select, в свою чергу, зазвичай є одним з елементів форми і знаходиться всередині її тегів її відкривають і закривають: рядок перша
другий рядок
це третя строкаЕтот простий перелік з трьох рядків, в якому за замовчуванням вибрано другу телефонну рядок на сторінці буде виглядати так:
перелік" class ="lightbx" data-lightbox ="article-image"gt;Select: простий & lt; strong & gt; список & lt; / strong & gt;


2
Щоб в випадаючому списку і в згорнутому стані було видно кілька рядків в тезі select треба додати атрибут size з кількістю видимих елементів: рядок перша
другий рядок
це третій рядок
Select: атрибут size = 2
3



Ширина списку визначається найдовшою його рядком, але її можна змінювати за допомогою стилів: рядок перша
другий рядок
це третя строкаШіріна задається в «пікселах» - така одиниця виміру в основному використовується при розмітці html-сторінок.
Select: зміна ширини атрибутом style = 2
4
Є можливість вибирати в списку не одну, а одночасно кілька рядків. Для цього в тег select слід додати атрибут multiple: рядок перша
другий рядок
це третя строкаЕсть і інші варіації функціональних можливостей списку. В основному вони вимагають на додаток до мови HTML використовувати мови javascript і CSS.


Увага, тільки СЬОГОДНІ!


Оцініть, будь ласка статтю
Всього голосів: 156
Увага, тільки СЬОГОДНІ!