Тег <datalist> HTML список предопределенных значений поля

Рейтинг: 4 из 5, голосов 1
++++-

Тег <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>

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<datalist> Да Да Да Да Да

Атрибуты datalist

Тег <datalist> не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.

Оцените, насколько полезна эта страница
++++-
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.