тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Тег datalist

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