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

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

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

Вам знадобиться

Базові знання мови HTML

Інструкція

  1. Як зробити випадаючий список
    Всі елементи сторінки сайту створюються браузером, який читає з надісланого йому сервером коду що саме і де саме на цій сторінці треба розмістити. Цей код мови HTML (HyperText Markup Language — «мова розмітки гіпертексту») «тегів», які описують тип, зовнішній вигляд і розташування елементів веб-сторінки. Стандартний список, що випадає створюється браузером, якщо він зустрічає в коді сторінки тег select. Виглядає він так:

    Тут «name» — це «атрибут» тега select, який містить ім’я саме цього списку, що випадає. Кожен випадаючий список на сторінці має власне ім’я. Крім імені можуть бути зазначені й інші атрибути списку, наприклад кольору фону і тексту вказується в атрибуті style:

    Вміст списку (рядки) перераховуються в інших тегах — option:

    рядку першої

    У тега option повинен бути атрибут value — значення, яке буде передано, коли відвідувач зробить свій вибір і відправить його на сервер. Зверніть увагу — саме значення тега value буде надіслано, а не те, що відвідувач побачить у випадаючому списку («рядок перша»). І у тега option можуть бути інші атрибути крім value, один з них — selected. Цей атрибут указує, що цей рядок списку повинна бути обрана за замовчуванням, тобто саме вона буде видно при закритому списку:

    другий рядок

    Кожному рядку списку відповідає окремий тег option і всі вони повинні розташовуватися всередині контейнера select, тобто до закриває тега:

     рядок перваявторая строкаето третій рядок

    А контейнер select, в свою чергу, зазвичай є одним з елементів форми і знаходиться всередині її тегів її відкривають і закривають:

       рядок перваявторая строкаето третій рядок

    Цей простий список з трьох рядків, в якому за умовчанням обрана другий рядок на сторінці буде виглядати так:

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

     рядок перваявторая строкаето третій рядок
  3. Як зробити випадаючий список
    Ширина списку визначається самою довгою його рядком, але її можна змінювати за допомогою стилів:

     рядок перваявторая строкаето третій рядок

    Ширина задається в «пікселах» — така одиниця виміру в основному використовується при розмітці html-сторінок.
  4. Є можливість вибирати в списку не одну, а одночасно кілька рядків. Для цього в тег select слід додати атрибут multiple:

     рядок перваявторая строкаето третій рядок

    Є й інші варіації функціональних можливостей випадаючого списку. В основному вони вимагають на додаток до мови HTML використовувати мови JavaScript і CSS.