Тег <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> поддерживает глобальные атрибуты и атрибуты событий.

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

chrome firefox safari opera
12+ 49+ 6+ 15+

Практикуйте свои знания

Что такое HTML-тег <datalist>?
Считаете ли это полезным?