Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Выпадающий список HTML

теги: html, функционал

Выпадающий список в 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>

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

В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье: Добавление поля выбора

Комментарии 1