Тег <datalist>

IE
10.0+
Chrome
20.0+
Opera
9.6+
Safari
Firefox
4.0+
Android
iOS

Тег <datalist> создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста. Закрывающий тег обязателен.

<input list="<идентификатор>">
<datalist id="<идентификатор>">
	 <option value="Текст1">
	 <option value="Текст2">
</datalist>

Атрибуты

Список, создаваемый тегом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list тега <input>.

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Тег datalist</title>
</head>
<body>
	<p>Ваш любимый персонаж манги Блич:</p>
	<p><input list="character">
	<datalist id="character">
		<option value="Ичиго Куросаки"></option>
		<option value="Рукия Кучики"></option>
		<option value="Орихиме Иноуэ"></option>
		<option value="Ясутора Садо"></option>
		<option value="Урюу Исида"></option>
	</datalist></p>
</body> 
</html>

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

Использование тега datalist

Браузеры

Internet Explorer до версии 10.0 отображает список внутри <datalist> в виде текста, остальные браузеры, которые не поддерживают этот тег, скрывают список.

Категория: HTML5