HTML :: Тег <datalist>

В HTML тег <datalist> (от англ. data list – перечень данных) создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования.

Синтаксис

	<input list="Идентификатор">
	<datalist id="Идентификатор">
		<option value="Вариант 1">
		<option value="Вариант 2">
	</datalist>		  
	
	Закрывающий тег: обязателен.

Атрибуты

id – данный глобальный атрибут имеет для элемента дополнительный смысл: его значение должно совпадать со значением атрибута list элемента <input>.
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/datalist

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</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>
		
		<button type="submit" disabled>Отправить</button>
				
	</form>		
	
</body>
</html>

Пример №1