Тег datalist
создает автозаполнение
для полей ввода input
в HTML форме.
Суть автозаполнения: когда пользователь будет пытаться набрать что-то в поле ввода, снизу будет появляться всплывающая подсказка, которая будет представлять собой список доступных вариантов выбора. Пользователь сможет выбрать один из предложенных вариантов, не вводя его до конца.
Чтобы привязать к тегу input
автозаполнение, ему необходимо задать атрибут
list
, в котором следует указать атрибут id
привязываемого тега datalist
.
Варианты выбора хранятся в тегах option
,
которые в свою очередь хранятся в теге datalist
.
Пример
Давайте в поле ввода введем страну. Введем
вначале букву 'б'
- и увидим вплывающую
подсказку из трех стран. Затем введем еще
и букву 'е'
- количество предложенных
стран сократится до двух:
<input type="text" list="country">
<datalist id="country">
<option>Беларусь</option>
<option>Бельгия</option>
<option>Болгария</option>
</datalist>
:
Пример
Давайте теперь к тегу option
добавим
атрибут value
. При выборе определенной
страны в привязанный инпут попадет не название
страны, а содержимое атрибута value
:
<input type="text" list="country-value">
<datalist id="country-value">
<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 id="country">
<option>Беларусь</option>
<option>Бельгия</option>
<option>Болгария</option>
<input type="submit">
</datalist>
</form>
:
Смотрите также
-
атрибут
autocomplete
,
который делает нечто похожее на тегdatalist