HTML datalist

Обучение html

HTML 5 появился новый тег datalist. Используется для создания выпадающего списка с подсказками при совместном использовании с тегом input. Ранее этот трюк реализовывался с помощью применения кода JavaScript, теперь может работать на чистом HTML.

Пользователю вашего сайта будет очень удобно использовать эту функцию, особенно если у вас планируется коммерческий сайт, не важно какой тематики. Например нужно выбрать марку автомобиля. Их огромное количество, выпадающий список будет огромным и утомительным. А с помощью кода HTML datalist пользователь начнет вводить марку своего автомобиля и список начнет сокращаться по мере ввода текстовых символов и вскоре останется только нужная ему модель. Подобных примеров можно привести множество. Лучше разберем как это работает.

Тег datalist

Тег datalist играет роль справочного контейнера, куда помещается список фраз обернутые в тег <option> для вывода дополнений. Input создает поле куда вводится тестовый запрос и активируется по фокусировки пользователя.

Давайте реализуем вышеприведенный пример со списком автомобилей. Для этого создадим input:

<label>Введите марку автомобиля:
    <input list="car" name="myCar">
</label>

Теперь добавляем код HTML datalist со списком необходимых позиций

<datalist id="car">
       <option value="BMW">
       <option value="Mercedes">
       <option value="Volvo">
       <option value="Lada">
       <option value="Audi">
</datalist>

Тег datalist контейнер которому присваиваем id=”car”, а вот позиции которые будут выпадать мы создаем с помощью тега <option>. Ширина списка будет определяться автоматически, по самому длинному наименованию. Где будет размещена часть кода не имеет роли, ему присвоен id. Вот так должен выглядит код в редакторе:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Список автомобилей</title>
    </head>
    <body>
        <label>Введите марку автомобиля:
            <input list="car" name="myCar">
        </label>
        <datalist id="car">
            <option value="BMW">
            <option value="Mercedes">
            <option value="Volvo">
            <option value="Lada">
            <option value="Audi">
        </datalist>
    </body>
</html>

Результат работы кода в браузере Chrome.

HTML datalist
Результат работы кода HTML5 тег <datalist>

Закрепите результат пройденного материала сделав собственный список. Код выложите в комментарии, автор статьи вам ответ правильно он написан или нет.

webm.tech