Выпадающий список html форма: Атрибут multiple | htmlbook.ru

Leave a Comment / Html / By /

Поле со списком | WebReference

Поле со списком, называемое ещё ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создаётся следующим образом.

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши

Ctrl и Shift, и раскрывающийся список.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Атрибуты элемента <select>

Рассмотрим атрибуты <select>, с помощью которых можно изменять представление списка.

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствуетАтрибут size равен 2

Для выбора нескольких значений списка применяются клавиши

Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><select name=»select» size=»3″ multiple> <option selected value=»s1″>Чебурашка</option> <option value=»s2″>Крокодил Гена</option> <option value=»s3″>Шапокляк</option> <option value=»s4″>Крыса Лариса</option> </select> <input type=»submit» value=»Отправить»></p> </form> </body> </html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты элемента <option>

Элемент <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если к <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер в виде пары «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label.

Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><strong>Выбери персонажа</strong></p> <p><select name=»hero»> <option value=»s1″>Чебурашка</option> <option value=»s2″ selected>Крокодил Гена</option> <option value=»s3″>Шапокляк</option> <option value=»s3″ label=»Лариса»>Крыса Лариса</option> </select> <input type=»submit» value=»Отправить»></p> </form> </body> </html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option> объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><select name=»food»> <optgroup label=»Русская кухня»> <option value=»r1″>Закуска Барская</option> <option value=»r2″>Раки, фаршированные по-царски</option> <option value=»r3″>Биточки в горшочке</option> </optgroup> <optgroup label=»Украинская кухня»> <option value=»u1″>Галушки славянские</option> <option value=»u2″>Пампушки украинские</option> <option value=»u3″>Жаркое по-харьковски</option> </optgroup> </select></p> <p><input type=»submit» value=»Отправить»></p> </form> </body> </html>

Результат примера показан на рис.  1.

Рис. 1. Группированный список

См. также

  • <optgroup>
  • <option>
  • <select>
  • Пользовательские формы
  • Построение форм

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

HTML5 | Список select

Последнее обновление: 08.04.2016

Элемент select создает список. В зависимости от настроек это может быть выпадающий список для выбора одного элемента, либо раскрытый список, в котором можно выбрать сразу несколько элементов.

Создадим выпадающий список:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
				<select name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Внутрь элемента select помещаются элементы option — элементы списка. Каждый элемент option содержит атрибут value, который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им текстом. Например:

<option value="apple">iPhone 6S</option>

С помощью атрибута selected мы можем установить выбранный по умолчанию элемент — это необязательно должен быть первый элемент в списке:


<select name="phone">
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

С помощью другого атрибута disabled можно запретить выбор определенного элемента. Как правило, элементы с этим атрибутом служат для создания заголовков:


<select name="phone">
	<option disabled selected>Выберите модель</option>
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label> <br/>
			
				<select multiple name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега <optgroup>:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
			
				<select name="phone">
					<optgroup label="Apple">
						<option value="iphone 6s">iPhone 6S</option>
						<option value="iphone 6s plus">iPhone 6S Plus</option>
						<option value="iphone 5se">iPhone 5SE</option>
					</optgroup>
					<optgroup label="Microsoft">
						<option value="lumia 950">Lumia 950</option>
						<option value="lumia 950 xl">Lumia 950 XL</option>
						<option value="lumia 650">Lumia 650</option>
					</optgroup>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Использование групп элементов применимо как к выпадающему списку, так и к списку со множественным выбором.

НазадСодержаниеВперед

Элементы формы HTML

❮ Назад Далее ❯

В этой главе описываются все различные элементы формы HTML.

HTML-элементы

HTML-элемент может содержать один или несколько следующих элементов формы:

  • <метка>
  • <выбрать>
  • <текстовое поле>
  • <кнопка>
  • <набор полей>
  • <легенда>
  • <список данных>
  • <выход>
  • <опция>
  • <оптгруппа>

Элемент

Одним из наиболее часто используемых элементов формы является элемент .

Элемент может отображаться несколькими способами, в зависимости от тип атрибут.

Пример


Попробуйте сами »

Все различные значения типа атрибут рассматривается в следующей главе: Типы ввода HTML.

Элемент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *