Тег <datalist> используется для создания списка вариантов ввода, предопределенных тегом <input>. Изначально варианты скрыты, список вариантов становится доступным, когда пользователь начинает вводить текст. Атрибут list тега <input> должен соответствовать идентификатору (id) элемента <datalist>.
Предопределенные варианты для ввода заключаются во вложенный элемент <option>.
Синтаксис
Содержимое тега заключается между открывающим (<datalist>) и закрывающим (</datalist>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<div>Выберите браузер</div>
<input list="browsers" />
<datalist id="browsers">
<option value="Opera">
<option value="Safari">
<option value="Firefox">
<option value="Google Chrome">
<option value="Maxthon">
</datalist>
</body>
</html>
Результат
Выберите браузер
Атрибуты
Тег <datalist> поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
12+ | 49+ | 6+ | 15+ |
Практикуйте свои знания
Что такое HTML-тег <datalist>?
Правильный!
Неправильно!