<datalist>

HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Категория контента Потоковый контент, фразовый контент.
Разрешённое содержимое Либо фразовый контент, либо ноль или более элементов <option>.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители Любой элемент, который может содержать фразовый контент.
Разрешённые ARIA-роли Нет
DOM-интерфейс HTMLDataListElement

Атрибуты

С данным элементом можно использовать все глобальные атрибуты.

Примеры

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

Результат

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

Спецификация Статус Комментарий
HTML Living Standard
Определение '<datalist>' в этой спецификации.		 Живой стандарт
HTML5
Определение '<datalist>' в этой спецификации.		 Рекомендация

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
datalistChrome Полная поддержка 20Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 10Opera Полная поддержка 9.5Safari Полная поддержка 12.1WebView Android Полная поддержка 4.4.3Chrome Android Полная поддержка 33Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Since Firefox for Android 79, the dropdown menu containing available options does not appear. See bug 1535985.
Opera Android Частичная поддержка Частичная
Замечания
Частичная поддержка Частичная
Замечания
Замечания The dropdown menu containing available options does not appear in Opera for Android.
Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 2.0

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

Полифил

Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифилл: datalist-polyfill.

Смотрите так же

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