Тег | HTML справочник

HTML теги

Значение и применение

Элемент <datalist> определяет список предопределенных вариантов для ввода. Пользователи увидят раскрывающийся список предопределенных вариантов, как входных данных. Варианты списка можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и доступен при использовании с элементом <input>, при этом, атрибут list тега <input>, должен соответствовать идентификатору (глобальный атрибут id) элемента <datalist>.

Тег <option> применяется как вложенный элемент списка предопределенных вариантов для ввода и определяет пункты списка (параметры для выбора).

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

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<datalist>20.04.09.0Нет10.012.0

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Тег <datalist></title>
	</head>
	<body>
		<p>Список гостей:</p>
		<input list = "guestlist">
		<datalist id = "guestlist"> <!-- список предопределенных вариантов для ввода -->
			<option value = "Вася"> </option><!-- закрывающие элементы </option> в данном случае можно не использовать -->
			<option value = "Арик"> </option>
			<option value = "Армен"> </option>
		</datalist>
	</body>
</html>

В этом примере с использованием элемента <datalist> мы создали список предопределенных вариантов, элементы списка мы добавили элементом <option> (элементы списка вложены в тег <datalist>).

Кроме того, чтобы наш список был виден (мог использоваться) мы создали элемент <input> с атрибутом list, значение которого соответствует значению глобального атрибута id (идентификатор элемента) нашего списка предопределенных вариантов.

Результат нашего примера:

Пример использование элемента <datalist> (список предопределенных вариантов в HTML 5).

Давайте рассмотрим пример в котором используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>).

Элементом списков выступает тег <option>. Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него. Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.

Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута label HTML тега <option></title>
</head>
<body>
	<form action = "#"> <!--Адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
		<fieldset> <!--Группируем элементы формы-->
			<legend>Составление маршрута</legend> <!--Заголовок для элемента <fieldset> -->
			Город отправления:
			<select> <!--Раскрывающийся список-->
				<option  label = "Владивосток">
				<option  label = "Анапа">
				<option  label = "Москва">
				<option  label = "Смоленск">
				<option  label = "Якутск">
			</select>
				<p>Аэропорт назначения:
					<input type = "text" list = "airports"> 
				</p>
			<datalist id = "airports"> <!--Список предопределенных вариантов для ввода-->
				 <option value = "VVO" label = "Владивосток">
				 <option value = "MEM" label = "Анапа">
				 <option value = "VKO" label = "Москва Внуково">
				 <option value = "LNX" label = "Смоленск">
				 <option value = "YKS" label = "Якутск">
			</datalist>	
			<input type = "submit" value = "подтвердить">
			</fieldset>
	</form>
</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута label HTML тега <option> (текст надписи, которая указывает значение параметра).

Значение CSS по умолчанию

datalist {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Тег datalist — автозаполнение для полей ввода

Тег datalist создает автозаполнение для полей ввода input в HTML форме.

Суть автозаполнения: когда пользователь будет пытаться набрать что-то в поле ввода, снизу будет появляться всплывающая подсказка, которая будет представлять собой список доступных вариантов выбора. Пользователь сможет выбрать один из предложенных вариантов, не вводя его до конца.

Чтобы привязать к тегу

input автозаполнение, ему необходимо задать атрибут list, в котором следует указать атрибут id привязываемого тега datalist.

Варианты выбора хранятся в тегах option, которые в свою очередь хранятся в теге datalist.

Пример

Давайте в поле ввода введем страну. Введем вначале букву 'б' — и увидим вплывающую подсказку из трех стран. Затем введем еще и букву 'е' — количество предложенных стран сократится до двух:

<input type="text" list="country"> <datalist> <option>Беларусь</option> <option>Бельгия</option> <option>Болгария</option> </datalist>

:

Пример

Давайте теперь к тегу option добавим атрибут value. При выборе определенной страны в привязанный инпут попадет не название страны, а содержимое атрибута value:

<input type="text" list="country-value"> <datalist> <option value="Беларусь">Беларусь - страна озер и картошки</option> <option value="Бельгия">Бельгия - страна, в которой живут бельгийцы</option> <option value="Болгария">Болгария - страна для отдыха</option> </datalist>

:

Пример .

Влияние атрибута autocomplete

На выпадающий список подсказок оказывает влияние атрибут autocomplete. Если он включен (а так и будет по умолчанию), то к значениям, которые вы задали в теге datalist, будут примешиваться те значения, которые пользователь вводил в это поле ранее.

Вбейте в поле 'Бразилия' и нажмите кнопку отправки(без отправки браузер не запомнит то, что вы вводили ранее, в нашем случае Бразилию). Затем вернитесь к этому примеру и введите букву 'б' — в появившемся списке вы увидите не только

3 страны из datalist, но и вбитую ранее Бразилию (кроме того, если вы проделаете то же самое со словом 'Беларусь' — в выпадающем списке будет две Беларуси).

Если вам это мешает — отключите атрибут autocomplete, добавив ему значение off.

Проделайте описанные выше манипуляции с примером:

<form action=""> <input type="text" list="country" autocomplete="on"> <datalist> <option>Беларусь</option> <option>Бельгия</option> <option>Болгария</option> <input type="submit"> </datalist> </form>

:

Смотрите также

  • атрибут autocomplete,
    который делает нечто похожее на тег datalist

: Элемент списка данных HTML — HTML: язык гипертекстовой разметки

HTML-элемент содержит набор из элементов, которые представляют допустимые или рекомендуемые параметры, доступные для выбора из других элементов управления.

Чтобы привязать элемент к элементу управления, мы присваиваем ему уникальный идентификатор в атрибуте id , а затем добавляем атрибут

list в атрибут элемент с тем же идентификатором, что и значение. Только определенные типы поддерживают такое поведение, и оно также может варьироваться от браузера к браузеру.

Примечание: Элемент может хранить значение как внутреннее содержимое и в атрибутах value и label . Какой из них будет отображаться в раскрывающемся меню, зависит от браузера, но при нажатии содержимое, введенное в поле управления, всегда будет поступать из значение атрибут.

Этот элемент не имеет других атрибутов, кроме глобальных атрибутов, общих для всех элементов.

Текстовые типы

Рекомендуемые значения типов text, search, url, tel, email и number отображаются в раскрывающемся меню, когда пользователь щелкает или дважды щелкает элемент управления. Обычно в правой части элемента управления также есть стрелка, указывающая на наличие предопределенных значений.

 

<список данных>

Типы даты и времени

Типы month, week, date, time и datetime-local могут отображать интерфейс, позволяющий удобно выбирать дату и время. Там могут отображаться предопределенные значения, что позволяет пользователю быстро ввести контрольное значение.

Примечание: Если тип не поддерживается, вместо него будет использоваться тип text , создающий простое текстовое поле. Это поле будет правильно распознавать рекомендуемые значения и отображать их пользователю в раскрывающемся меню.

 
<список данных>

Тип диапазона

Рекомендуемые значения в типе диапазона будут отображаться в виде серии решеток, которые пользователь может легко выбрать.

 

<список данных>

Тип цвета

Тип цвета может отображать предопределенные цвета в интерфейсе браузера.

 

<список данных>

Тип пароля

Спецификация позволяет связать с типом пароля, но ни один браузер не поддерживает это из соображений безопасности.

 

<список данных>
Категории контента Потоковое содержание, фразовое содержание.
Разрешенный контент Или фразовое содержание или ноль или более элементов.
Отсутствие тега Нет, начальный и конечный теги обязательны.
Разрешенные родители Любой элемент, принимающий фразовое содержание.
Неявная роль ARIA список
Разрешенные роли ARIA Нет роль разрешено
Интерфейс DOM HTMLDataListElement
Спецификация
HTML Standard
# Datalist-Element
559.salt. Включите JavaScript для просмотра данных.

  • Элемент , а точнее его атрибут list ;
  • Элемент .

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последнее изменение этой страницы: участников MDN.

HTML-тег списка данных

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Список данных с предопределенными параметрами (подключенный к элементу ):



 

Попробуйте сами »

Определение и использование

Тег задает список предопределенных параметров для элемента .

Тег используется для предоставления функции «автозаполнения». для <ввод> элементы. При вводе данных пользователи увидят раскрывающийся список предопределенных параметров.

Атрибут id элемента должен быть равен атрибуту списка элемента (это связывает их вместе).

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент
<список данных> 20,0 10,0 4,0 12,1 9,5

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Связанные страницы

Ссылка HTML DOM: Datalist Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

datalist {
  display: none;
}

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.