html.okpython.net
HTML и CSS для начинающих

HTML :: Создание раскрывающихся списков внутри форм

Использование тегов <select> и <option>

Для создания раскрывающихся списков с выбором предопределенных вариантов в HTML используется элемент «select», который формируется парным тегом <select> (от англ. select – выбирать) и является контейнером для пунктов списка. В свою очередь, пункты раскрывающегося списка представлены элементами «option», которые формируются парным тегом <option> (от англ. option – вариант, выбор).

Атрибуты тега <select>

Элемент «select» также, как и элемент «input», обладает атрибутами: autofocus, disabled, form, required, name, имеющими аналогичное назначение. Их можно посмотреть в нашем справочнике здесь. Кроме того, для указания изначально видимого количества вариантов списка используется атрибут size, который в качестве значения принимает натуральные числа, и логический атрибут multiple, позволяющий выбирать сразу несколько вариантов. Если значение атрибута size больше единицы, но меньше общего количества имеющихся вариантов в списке, то браузер автоматически добавит полосу прокрутки, чтобы было ясно, что имеются еще варианты для выбора.

Использование элемента «select» показано в примере №1.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Раскрывающиеся списки</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите спортивный разряд: &nbsp; 		
		<!-- Создаем раскрывающийся список -->
		<select name="category">
			<option value="0">отсутствует</option>
			<option value="3" label="3-й">3-й взрослый</option>
			<option value="2" label="2-й">2-й взрослый</option>
			<option value="1" label="1-й">1-й взрослый</option>
			<option value="kms">КМС</option>
			<option value="ms">МС</option>
			<option value="msmk">МСМК</option>
		</select> <br><br> 
		
		Выберите виды спорта: <br><br>
		<!-- Изначально будет видно три пункта, но выбирать можно -->
		<!-- сразу несколько пунктов при нажатой клавише Ctrl -->
		<select name="sport[]" size="3" multiple>
			<option value="0" selected>Бокс</option>
			<option value="1">Вольная борьба</option>
			<option value="2">Дзюдо</option>
			<option value="3">Каратэ</option>
			<option value="4">Таэквондо</option>
		</select> <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример №1. Использование элемента «select»

Атрибуты тега <option>

Элемент «option» также имеет несколько своих атрибутов:

  • value – устанавливает значение пункта списка, которое будет отправлено на сервер или использовано скриптами;
  • disable – блокирует доступ к данному варианту списка; атрибут по умолчанию выключен и значений не принимает;
  • selected – если данный логический атрибут присутствует, то пункт списка будет заранее выделен, при этом пользователь сможет в случае необходимости снять выделение;
  • label – в качестве значения принимает строку, которая представляет собой сокращение основного текста, расположенного между открывающим и закрывающим тегами элемента «option»; если атрибут label указан, то в списке вариантов выводится его значение, а не основной текст.

Тег <optgroup> и его атрибуты

В случае необходимости группировки некоторых пунктов раскрывающегося списка применяется элемент «optgroup», который формируется парным тегом <optgroup> (от англ. option group – группа вариантов) и является контейнером для элементов «option», объединяемых в группу. Элемент имеет два собственных атрибута: disable и label. Первый атрибут является логическим и блокирует доступ к своей группе пунктов списка, а второй – принимает в качестве значения текст, который будет выводиться, как заголовок группы.

Использование элемента «optgroup» показано в примере №2.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «optgroup»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите любимые фрукты и овощи: &nbsp; 		
		
		<select name="fruits_vegetables" multiple size="3">
			
			<optgroup label="Фрукты">	
				<option value="apple">Яблоки</option>
				<option value="pear">Груши</option>
				<option value="orange">Апельсины</option>
			</optgroup>	
			
			<optgroup label="Овощи">
				<option value="carrot">Морковь</option>
				<option value="beet">Свекла</option>
				<option value="potato">Картофель</option>
			</optgroup>	
			
		</select>     <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример №2. Использование элемента «optgroup»

Отметим, что элемент «optgroup» не может быть выделен пользователем, по умолчанию отображается полужирным шрифтом, а все пункты списка, расположенные внутри, смещаются вправо относительно своего исходного положения.

Тег <datalist> и его атрибуты

Еще одним дополнительным элементом, напоминающим раскрывающийся список и введенным в пятой версии HTML, является элемент «datalist», формирующийся парным тегом <datalist> (от англ. data list – перечень данных) и представляющий собой контейнер для хранения элементов «option». Данный элемент создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования. Элемент имеет только глобальные атрибуты, а используется совместно с элементом «input», у которого имеется для этого атрибут list, принимающий в качестве значения id элемента «datalist».

Использование элемента «datalist» показано в примере №3.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «datalist»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<label> Вид единоборства: &nbsp; 
			<!-- Связываем данное поле с элементом «datalist» -->
			<!-- при помощи атрибута «list» -->
			<input type="text" name="box" list="sport"> 
		</label>
		
		<!-- Обязательно задаем атрибут «id» -->
		<datalist id="sport">
			<option value="box">
			<option value="karate">
			<option value="judo">
		</datalist><br><br>
		
		<input type="submit" value="Отправить" disabled> 		
		
	</form>
</body>
</html>

Пример №3. Использование элемента «datalist»

Как видно из примера, как только была введена буква «b», сразу же появилась подсказка. Если бы слов, начинающихся на букву «b» было больше, то все они появились бы в качестве вариантов автозаполнения. При вводе второго и последующих символов, в списке останутся только те варианты, которые начинаются на введенную последовательность символов.

Быстрый переход к другим страницам

▲
▼