HTML тег <datalist>

Элемент <datalist> (от англ. "data list" ‒ «список данных») используется для "автозаполнения" элемента <input>. При активации соответствующего элемента <input> (например, если пользователь начал ввод какого-нибудь текста в поле ввода) пользователь увидит выпадающий список из предопределенных вариантов данных для ввода.

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

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

Вы можете заполнить элемент <datalist> путем вложения в него тегов <option>.

Синтаксис

<input list="[идентификатор]">
...
<datalist id="[идентификатор]">
  <option value="...">
  ...
</datalist>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

datalist { 
    display: none;
}

Различия между HTML 4.01 и HTML5

Тег <datalist> был добавлен в HTML5.

Пример использования:

Элемент <datalist>

<input type = "text" list = "airports"> 
<datalist id = "airports">
  <option value = "Владивосток">
  <option value = "Анапа">
  <option value = "Москва Внуково">
  <option value = "Смоленск">
  <option value = "Якутск">
</datalist>

Спецификации