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

Відео: Як створити список, що випадає в excel. Найпростіший спосіб

На сторінках сайтів в мережі дуже часто присутні списки, що випадають. Їх використовують для того, щоб згрупувати однотипні значення, якщо треба заощадити місце на сторінці, або щоб при заповненні будь-якої форми дати відвідувачеві можливість вибрати один пункт з декількох, або щоб організувати компактне меню і т.д. Розглянемо - як робиться випадає перелік.

Всі елементи сторінки сайту створюються браузером, який читає з надісланого йому сервером коду що саме і де саме на цій сторінці треба розмістити. Цей код мови 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;

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

Ширина списку визначається найдовшою його рядком, але її можна змінювати за допомогою стилів: рядок перша
другий рядок
це третя строкаШіріна задається в «пікселах» - така одиниця виміру в основному використовується при розмітці html-сторінок.

Є можливість вибирати в списку не одну, а одночасно кілька рядків. Для цього в тег select слід додати атрибут multiple: рядок перша
другий рядок
це третя строкаЕсть і інші варіації функціональних можливостей списку. В основному вони вимагають на додаток до мови HTML використовувати мови jаvascript і CSS.

Поділися в соціальних мережах:

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

Схожі