<datalist> – елемент списку даних HTML

Елемент HTML <datalist> (список даних) уміщає набір елементів <option>, що представляють допустимі або рекомендовані варіанти, доступні для вибору в інших контрольних елементах.

Спробуйте його в дії

Щоб зв'язати елемент <datalist> з контрольним елементом, йому задається унікальний ідентифікатор в атрибуті id, а потім до елемента <input>додається атрибут list зі значенням того ж ідентифікатора. Лише певні типи <input> підтримують таку логіку, а ще ця логіка може відрізнятися в різних браузерах.

Кожний елемент <option> повинен мати атрибут value, який є пропозицією для введення в поле. Також він може мати атрибут label або, якщо останнього немає, певний текстовий вміст, який браузер може відображати замість value (Firefox) або на додачу до value (Chrome і Safari – як доповняльний текст). Конкретний вміст спадного меню залежить від браузера, проте коли варіантом клацають, то вміст, що вводиться у поле контрольного елемента, завжди береться з атрибута value.

[!NOTE]

<datalist> не є заміною для <select>. <datalist>, по суті, не є полем для введення; це список пропонованих значень для пов'язаного контрольного елемента. Цей контрольний елемент все одно може прийняти будь-яке значення, що проходить валідацію, навіть якщо його нема в списку пропозицій.

Атрибути

Цей елемент не має атрибутів, окрім глобальних атрибутів, спільних для всіх елементів.

Доступність

Коли вирішено використовувати елемент <datalist>, слід пам'ятати про такі проблеми доступності:

• Розмір шрифту варіантів списку даних не збільшується, завжди залишаючись однаковим. Вміст автозаповнення не збільшується та не зменшується, коли решта вмісту збільшується або зменшується.
• Оскільки доступ до списку варіантів за допомогою CSS дуже обмежений або відсутній, їхня візуалізація не може бути стилізована для режиму високого контрасту.
• Частина комбінацій читачів з екрана та браузерів, включно з NVDA та Firefox, не виголошує вміст спливного списку автозаповнення.

Приклади

Текстові типи

Рекомендовані значення в типах text, search, url, tel, email і number відображаються у спадному меню, коли користувач клацає або подвійно клацає контрольний елемент. Зазвичай права сторона контрольного елемента також містить стрілку, що вказує на наявність попередньо визначених значень.

<label for="myBrowser">Оберіть браузер з цього списку:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

Типи дати та часу

Типи month, week, date, time і datetime-local можуть показати інтерфейс, що дає змогу зручно вибрати дату та час. У них також можуть бути показані наперед визначені значення, що дає користувачам змогу швидше заповнити значення контрольного елемента.

[!NOTE] Коли тип не підтримується, замість нього використовується тип text, що утворює просте текстове поле. Таке поле коректно розуміє рекомендовані значення та виводить їх користувачам у спадному меню.

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

Діапазонний тип

Рекомендовані значення для типу range виводяться як послідовність позначок, які користувач може легко вибрати.

<label for="tick">Розмір чайових:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

Колірний тип

Тип color може показати наперед визначені кольори в інтерфейсі, що надається браузером.

<label for="colors">Оберіть колір (бажано відтінок червоного):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

• Елемент <input>, а конкретніше – його атрибут list;
• Елемент <option>.