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

Сергій Сироїжкін Копірайтер

Список, що випадає в HTML можна зробити за допомогою тега select. Крім випадає (або "розкривається") списку, тег select дозволяє створювати елемент-список з множинним вибором. Синтаксис використання тега select HTML виглядає наступним чином:

Тут за допомогою тега option задаються елементи списку.

Атрибути тега SELECT

Розглянемо атрибути тега select:

  • name
  • size - число відображуваних рядків у списку (число);
  • multiple - включає функцію множинного вибору елементів списку;
  • disabled - блокує доступ до елементу;
  • form - дозволяє зв'язати випадає з формою (може знадобитися, якщо сам список знаходиться поза формою, до якої повинен бути прив'язаний). Як аргумент передається id форми.

Мабуть, це все основні атрибути тега select. які найчастіше використовуються. Подивимося тепер, як зробити, що випадає в HTML з використанням зазначених атрибутів:

Атрибути тега OPTION

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

  • disabled - встановлює заборону на вибір даного елемента списку;
  • label - дозволяє встановити мітку для поточного елемента списку (замість тексту, зазначеного в тезі, виводиться значення мітки, що дозволяє виводити скорочене значення); Увага: атрибут не підтримуються в браузері Firefox
  • selected - поточний пункт списку буде вибраний за умовчанням;
  • value - значення, яке буде передано на сервер;

Подивимося на розширений варіант використання тега option:

Виглядати результат наведеного прикладу буде наступним чином:

У конструкторі сайтів "Нубекс" є можливість створювати довільні форми за допомогою модуля конструктора форм. Робота випадаючих списків в "Нубекс" описана в статті: Додавання поля вибору

Схожі статті