САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Тег <datalist>



Пример

Список данных с предопределенными опциями (подключенный к элементу <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> используется для обеспечения функции "autocomplete" элементов <input>. При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.

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


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

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.

Элементы
<datalist> 20.0 10.0 4.0 12.1 9.5

Глобальные атрибуты

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


События атрибутов

Тег <datalist> также поддерживает События атрибутов в HTML.


Связные страницы

HTML DOM справочник: Объект datalist


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <datalist> со следующими значениями по умолчанию:

datalist {
  display: none;
}