Тег <datalist>
Синтаксис
<datalist>...</datalist>
Описание
Тег <datalist> (от англ. data list — список данных) создаёт список предопределенных вариантов для ввода, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или при наборе текста.
Внимание!
Атрибут id в теге <datalist> должен быть равен атрибуту list тега <input> (это связывает их вместе).
Тег <option> применяется как вложенный элемент тега <datalist> и определяет пункты списка (параметры для выбора).
Тег <datalist> поддерживает глобальные атрибуты и атрибуты события.
Пример
HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Тег datalist</title>
</head>
<body>
<input list="browsers" placeholder="Выберите браузер:" />
<datalist id="browsers">
<option value="Chrome">
<option value="Opera">
<option value="Firefox">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
</body>
</html>
Отображение в браузере:
Параметры CSS по умолчанию
datalist {
display: none;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <datalist> | Да | Да | Да | Да | Да |
