Пример
Список данных с предопределёнными вариантами (связанный с элементом <input>):
<label for="browser">Выберите браузер из списка:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Попробуйте сами »
Определение и использование
Тег <datalist> определяет список предопределённых вариантов для элемента <input>.
Тег <datalist> используется для обеспечения функции "автозаполнения" для элементов <input>. Пользователи увидят выпадающий список предопределённых вариантов при вводе данных.
Атрибут id элемента <datalist> должен быть равен атрибуту list элемента <input> (это связывает их вместе).
Поддержка браузерами
Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <datalist> | 20.0 | 10.0 | 4.0 | 12.1 | 9.5 |
Глобальные атрибуты
Тег <datalist> также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег <datalist> также поддерживает атрибуты событий в HTML.
Связанные страницы
Справка по HTML DOM: Объект Datalist
Настройки CSS по умолчанию
Большинство браузеров отображают элемент <datalist> со следующими значениями по умолчанию:
datalist {
display: none;
}