Выпадающий список в HTML можно сделать при помощи тега select. Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:
<select>
<option>Электроник</option>
<option>Сыроежкин</option>
<option>Чижиков</option>
<option>Кукушкина</option>
</select>Здесь с помощью тега option задаются элементы списка.
Результат применения:
Атрибуты тега SELECT
Рассмотрим атрибуты тега select:
- name
- size - число отображаемых строк в списке (число);
- multiple - включает функцию множественного выбора элементов выпадающего списка;
- disabled - блокирует доступ к элементу;
- form - позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.
Пожалуй, это все основные атрибуты тега select, которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:
<html>
<head>
<title>Выпадающий список с помощью HTML - Нубекс</title>
</head>
<body>
<form id="nubexForm" action="do.php">
<input type="submit" value="Отправить" />
</form>
<select name="nubexSelect" size="3" multiple form="nubexForm">
<option>Электроник</option>
<option>Сыроежкин</option>
<option>Чижиков</option>
<option>Кукушкина</option>
</select>
</body>
</html>Атрибуты тега OPTION
Тег option, как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select, который, в свою очередь, играет роль контейнера. Тег option имеет собственные атрибуты:
- disabled - устанавливает запрет на выбор данного элемента списка;
- label - позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
- selected - текущий пункт списка будет выбран по умолчанию;
- value - значение, которое будет передано на сервер;
Посмотрим на расширенный вариант использования тега option:
<select>
<option label="Электроник" value="1" selected>Господин Электроник</option>
<option>Сыроежкин</option>
<option disabled>Чижиков</option>
<option>Кукушкина</option>
</select>Выглядеть результат приведенного примера будет следующим образом:
В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье: Добавление поля выбора