HTML-тег <datalist>

HTML-тег <datalist> используется для предоставления списка предопределённых вариантов для элемента <input> . Он расширяет возможности пользовательского ввода, предлагая подсказки и позволяя пользователю вводить собственные значения. Это особенно полезно для функций автозаполнения, повышая удобство использования и точность ввода данных в формах.

HTML datalist Пример тега — выбор варианта из предложенных

Тег <datalist> работает, связываясь с элементом <input> через атрибут list . Каждый параметр в списке данных определяется с помощью тега <option> .

Базовый синтаксис тега <datalist>

Базовая структура тега <datalist> следующая: 

<input list="id-of-datalist">
<datalist id="id-of-datalist">
    <option value="Option 1">
    <option value="Option 2">
    <option value="Option 3">
</datalist>

Атрибуты тега <datalist>

  • id: Обязательный атрибут, который связывает <datalist> с элементом <input> через атрибут ввода list .

Базовый пример HTML-тега <datalist>

Вот пример использования тега <datalist> для предоставления списка предложений для текстового ввода: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Datalist Example</h2>
        <label for="browser">Choose a browser:</label>
        <input list="browsers" id="browser" name="browser">

        <datalist id="browsers">
            <option value="Google Chrome">
            <option value="Mozilla Firefox">
            <option value="Safari">
            <option value="Microsoft Edge">
            <option value="Opera">
        </datalist>
    </body>
</html>

Пояснение: Когда пользователь нажимает на поле ввода или начинает вводить текст, браузер отображает раскрывающийся список с предустановленными вариантами. Пользователь может выбрать один из них или ввести собственное значение.

Когда следует использовать тег <datalist>?

  • Автозаполнение: когда вы хотите предложить предопределенные варианты, но при этом оставить возможность пользовательского ввода.
  • Управляемый ввод: направляет пользователя к часто используемым или допустимым вводам, не ограничивая его.
  • Динамические предложения: в сочетании с JavaScript вы можете динамически заполнять список данных на основе взаимодействия с пользователем.

Расширенное использование HTML-тега <datalist>

1. Динамическое заполнение элементов в списке данных с помощью JavaScript

Вы можете динамически заполнить элемент <datalist> с помощью JavaScript: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Datalist Example</h2>
        <label for="fruit">Choose a fruit:</label>
        <input list="fruits" id="fruit" name="fruit">

        <datalist id="fruits"></datalist>

        <script>
            const fruits = ["Apple", "Banana", "Cherry", "Date", "Grapes"];
            const datalist = document.getElementById("fruits");

            fruits.forEach(fruit => {
                const option = document.createElement("option");
                option.value = fruit;
                datalist.appendChild(option);
            });
        </script>
    </body>
</html>

Объяснение: Код JavaScript динамически создает элементы <option> для каждого фрукта в массиве и добавляет их к <datalist> .

2. Пользовательская проверка входных данных по списку данных

Вы можете проверить входные данные на соответствие параметрам в списке данных с помощью JavaScript: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Validation with Datalist</h2>
        <label for="language">Choose a programming language:</label>
        <input list="languages" id="language" name="language">

        <datalist id="languages">
            <option value="JavaScript">
            <option value="Python">
            <option value="Java">
            <option value="C++">
        </datalist>

        <button onclick="validateInput()">Submit</button>

        <script>
            function validateInput() {
                const input = document.getElementById("language").value;
                const options = [...document.getElementById("languages").options].map(opt => opt.value);

                if(options.includes(input)) {
                    alert("Valid choice!");
                } else {
                    alert("Invalid choice. Please select from the suggestions.");
                }
            }
        </script>
    </body>
</html>

Объяснение: Функция JavaScript проверяет, соответствует ли ввод пользователя одному из предопределенных вариантов, и предоставляет соответствующую обратную связь.