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

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

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.

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

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

Еще статьи

Group by sql

history HTML

кодирование JavaScript

gitignore GIT

карта изображения html

произношение javascript

SQL html

память выделяемая php

отступ текста css

Комментарии

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

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке