Всем привет и пожалуй приступим. Допустим у нас есть некий код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Атрибут datalist в HTML5</title>
</head>
<body>
<input placeholder="Укажите ваш город"/>
</body>
</html>и мы хотим создать некий список частых значений которые вводят пользователи в это поле, чтобы при введении автоматически подсказывать их пользователю. Не поняли?
Сейчас продемонстрирую
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Атрибут datalist в HTML5</title>
</head>
<body>
<input placeholder="Укажите ваш город" list="city"/>
<datalist id="city">
<option >Москва</option>
<option >Санкт Петербург</option>
<option >Рязань</option>
</datalist>
</body>
</html>Как видим теперь если мы начинаем вводить название города которое уже есть в нашем списке, нам автоматически подсказывает что мы хотим ввести.
Также мы можем ничего не вводить, а просто два раза щелкнуть по полю и мы увидим весь наш список.
Для того чтобы сформировать список мы используем тег datalist и для связки нашего поля и списка мы тегу input указываем атрибут list которому присваиваем название идентификатора тега datalist.
Вот в общем то и все. Удачи!
