Тег <datalist>

Тег <datalist> (укр. — “список даних”) використовується в HTML для створення списку варіантів, які можна обрати при введенні в текстове поле форми. Він дозволяє реалізувати автозаповнення (autocomplete) — коли користувач починає вводити дані, йому пропонуються варіанти з попередньо визначеного списку.

<datalist> завжди використовується разом із елементом <input>, у якого атрибут list вказує на ідентифікатор відповідного списку даних.

Атрибути

Специфічні атрибути

Тег <datalist> сам по собі не має специфічних атрибутів. Його основна функція — містити перелік дочірніх елементів <option>, кожен з яких задає варіант для вибору.

Проте важливо розуміти, як взаємодіє атрибут list у <input>:

  • list (атрибут для <input>) — вказує на id пов’язаного елемента <datalist>. Наприклад:
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

Глобальні атрибути

Тег <datalist> підтримує всі глобальні атрибути HTML:

  • id — обов’язковий для зв’язку з полем вводу через атрибут list. Наприклад:
<input list="cities" name="city">
<datalist id="cities">
    <option value="Київ">
    <option value="Львів">
</datalist>
  • class — для застосування стилів через CSS (хоча сам список не відображається напряму). Наприклад:
<datalist id="languages" class="autocomplete-list">
    <option value="JavaScript">
    <option value="Python">
</datalist>
  • style — інлайн-стилі (майже не використовується, оскільки сам елемент невидимий в DOM):
<datalist id="frameworks" style="display: none;">
    <option value="React">
    <option value="Vue">
</datalist>
  • title — описова підказка (зазвичай не має практичного ефекту для цього тега, але технічно підтримується):
<datalist id="browsers" title="Оберіть браузер">
    <option value="Chrome">
    <option value="Firefox">
</datalist>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання datalist</title>
</head>
<body>
    <form>
        <label for="browser">Оберіть браузер:</label>
        <input list="browsers" id="browser" name="browser">

        <datalist id="browsers">
            <option value="Chrome">
            <option value="Firefox">
            <option value="Safari">
            <option value="Edge">
            <option value="Opera">
        </datalist>

        <button type="submit">Надіслати</button>
    </form>
</body>
</html>

Додаткові моменти

  • <datalist> працює лише в комбінації з полем вводу — сам по собі цей тег не генерує жодного UI.
  • Якщо ввести значення, якого немає у списку <option>, воно все одно буде прийнято — список лише підказує, а не обмежує.
  • Можна комбінувати з атрибутом required у <input>, якщо потрібно примусити вибір обов’язкового значення.
  • У деяких браузерах є особливості відображення підказок — бажано тестувати кросбраузерно.
  • На відміну від <select>, тут допускається введення користувацьких значень.
  • Не підтримує вкладених елементів окрім <option>.
  • Не підтримує групування варіантів (немає підтримки <optgroup>).