Тег <datalist>

Синтаксис

Описание

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

Внимание!

Атрибут id в теге <datalist> должен быть равен атрибуту list тега <input> (это связывает их вместе).

Тег <option> применяется как вложенный элемент тега <datalist> и определяет пункты списка (параметры для выбора).

Тег <datalist> поддерживает глобальные атрибуты и атрибуты события.

Пример

HTML-код:

<!DOCTYPE html>

<head>

<title>Тег datalist</title>

</head>

<body>

<input list="browsers" placeholder="Выберите браузер:" />

<datalist id="browsers">

<option value="Chrome">

<option value="Opera">

<option value="Firefox">

<option value="Safari">

<option value="Microsoft Edge">

</datalist>

</body>

</html>

Отображение в браузере:

Параметры CSS по умолчанию

datalist {
display: none;
}

Поддержка браузера

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<datalist>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

Да