<datalist>

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Интерактивный пример

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

Атрибуты

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

Примеры

html
<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="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

Результат

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

Specification
HTML
# the-datalist-element

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
datalist

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Полифил

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

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

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