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

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

Попробуйте

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

label {
  display: block;
  margin-bottom: 10px;
}

Чтобы связать элемент <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

Если атрибуты value указаны у элементов <option>, добавленных в список данных, связанный с элементом ввода типа 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" label="0%"></option>
  <option value="10" label="Minimum Tip"></option>
  <option value="20" label="Standard"></option>
  <option value="30" label="Generous"></option>
  <option value="50" label="Very Generous"></option>
</datalist>

Тип color

Тип 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>

Техническая сводка

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

Совместимость с браузерами

См. также

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