HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.
Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.
| Категория контента | Потоковый контент, фразовый контент. |
|---|---|
| Разрешённое содержимое | Либо фразовый контент, либо ноль или более элементов <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>' в этой спецификации. |
Рекомендация |
Поддержка браузерами
Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
datalist | Chrome Полная поддержка 20 | Edge Полная поддержка 12 | Firefox Полная поддержка 4 | IE Полная поддержка 10 | Opera Полная поддержка 9.5 | Safari Полная поддержка 12.1 | WebView Android Полная поддержка 4.4.3 | Chrome Android Полная поддержка 33 | Firefox Android Полная поддержка 4 | Opera Android
Частичная поддержка
Частичная
| Safari iOS Полная поддержка 12.2 | Samsung Internet Android Полная поддержка 2.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Частичная поддержка
- Частичная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
Полифил
Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифилл: datalist-polyfill.