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

{{HTMLSidebar}}

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

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

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

Примітка: Елемент <option> може зберігати певні значення як усередині себе, так і в атрибутах value і label. Який з них буде видно у спадному меню, залежить від браузера, але коли варіант клацають, вміст, введений у контрольне поле, завжди береться з атрибута value.

Атрибути

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

Приклади

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

Рекомендовані значення в типах 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 можуть показати інтерфейс, що дає змогу зручно вибрати дату та час. У них також можуть бути показані наперед визначені значення, що дає користувачам змогу швидше заповнити значення контрольного елемента.

Примітка: Коли тип не підтримується, замість нього використовується тип 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>

Парольний тип

Специфікація дозволяє сполучати <datalist> з типом password, але жоден браузер не підтримує це з міркувань безпеки.

<label for="pwd">Уведіть пароль:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

Занепокоєння щодо доступності

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

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

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

Категорії вмісту Потоковий вміст, оповідальний вміст.
Дозволений вміст Або оповідальний вміст, або нуль чи більше елементів <option>.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Всі елементи, що приймають оповідальний вміст.
Неявна роль ARIA listbox
Дозволені ролі ARIA Жодної ролі не дозволено
Інтерфейс DOM HTMLDataListElement

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
datalist
Chrome Full support 20
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 10
Opera Full support 9.5
Safari Full support 12.1
WebView Android Full support 4.4.3
Chrome Android Full support 33
Firefox for Android Partial support 79
footnote
Opera Android Full support 20
Safari on iOS Full support 12.2
Samsung Internet Full support 2.0

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

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