Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

datalist HTML

Всем привет и пожалуй приступим. Допустим у нас есть некий код

<!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.

Вот в общем то и все. Удачи!

Оцените статью

Еще статьи

transform CSS

Ссылки html

Javascript window

phpmailer php

Строки шаблонов javascript

ЧПУ htaccess

FileSystem api

css zoom

Комментарии

В данном разделе пока нет комментариев!

История

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.