<datalist>: Элемент HTML списка данных

Элемент <datalist> HTML содержит набор элементов <option>, которые представляют допустимые или рекомендуемые варианты, доступные для выбора в других элементах управления.

Для привязки элемента <datalist> к элементу управления мы даём ему уникальный идентификатор в атрибуте id, а затем добавляем атрибут list к элементу <input> с тем же идентификатором в качестве значения. Только определённые типы элементов <input> поддерживают такое поведение, и оно также может варьироваться в зависимости от браузера.

Каждый элемент <option> должен иметь атрибут value, который представляет собой предложение для ввода в поле ввода. Он также может иметь атрибут label, или, если его нет, некоторое текстовое содержимое, которое может отображаться браузером вместо value (Firefox) или в дополнение к value (Chrome и Safari, в качестве дополнительного текста). Точное содержимое раскрывающегося меню зависит от браузера, но при нажатии на него введённое в поле управления содержимое всегда будет взято из атрибута value.

У этого элемента нет других атрибутов, кроме общих атрибутов глобальных атрибутов для всех элементов.

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

• Размер шрифта параметров списка данных не масштабируется, всегда оставаясь неизменным. Содержимое автозаполнения не увеличивается и не уменьшается при масштабировании остального содержимого.
• Так как настройка стилей списка опций с помощью CSS очень ограничена или отсутствует, отображение не может быть стилизовано для режима высокой контрастности.
• Некоторые сочетания браузера и программы чтения с экрана, включая NVDA и Firefox, не объявляют содержимое всплывающего окна автозаполнения.

Рекомендуемые значения в типах text, search, url, tel, email и number отображаются в раскрывающемся меню при щелчке или двойном щелчке по элементу управления. Обычно в правой части элемента управления также будет стрелка, указывающая на наличие предопределённых значений.

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

Типы month, week, date, time и datetime-local могут отображать интерфейс, позволяющий удобно выбирать дату и время. Предопределенные значения могут отображаться там, что позволяет пользователю быстро заполнить значение элемента управления.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Рекомендуемые значения в типе range будут отображаться в виде ряда рисок, которые пользователь может легко выбрать.

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Тип color может отображать предопределённые цвета в интерфейсе, предоставляемом браузером.

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Спецификация позволяет связать <datalist> с типом password, но ни один браузер не поддерживает это из соображений безопасности.

<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

• Элемент <input>, и в частности его атрибут list;
• Элемент <option>.