Тег <datalist> HTML определяет список предопределенных вариантов (значений) для поля <input>.
Дочерними элементами для тега <datalist> должны быть теги <option> - пункты списка.
Список предопределенных вариантов подключается к полю формы с помощью атрибута list в теге <input>. Значение атрибута list должно содержать id списка datalist.
Списки в HTML являются элементами форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Тег <datalist> введен в HTML5.
Синтаксис
<datalist>элементы option</datalist>
Отображение в браузере
Предопределенные варианты подбираются по мере ввода текста. Попробуйте ввести "Ново" в поле ниже.
Пример использования <datalist> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Список предопределенных вариантов datalist</title>
</head>
<body>
<input list="cities" name="city" type="text">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Новороссийск">
<option value="Новосибирск">
<option value="Новокузнецк">
<option value="Владивосток">
</datalist>
</body>
</html>
Поддержка браузерами
| Тег | |||||
| <datalist> | Да | Да | Да | Да | Да |
Атрибуты datalist
Тег <datalist> не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.