<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.

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

<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; }

Категория контента	Потоковый контент, фразовый контент.
Допустимое содержимое	Либо фразовый контент, либо ноль или более элементов `<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>