<datalist> - тег для створення списку варіантів
HTML-тег <datalist> містить набір елементів <option>, які представляють собою варіанти, що пропонуються для автозаповнення в інших елементах керування, найчастіше в <input>.
HTML-елемент <datalist> використовується для створення списку попередньо визначених варіантів для елемента <input>. Це дозволяє користувачам як вводити власне значення, так і вибирати зі списку, що випадає, що покращує зручність і точність введення даних.
<datalist> не є заміною для <select>. <datalist> пропонує варіанти, але дозволяє ввести довільне значення, тоді як <select> обмежує вибір лише наданими опціями.
Синтаксис
<input list="items">
<datalist id="items">
<option value="Варіант 1">
<option value="Варіант 2">
<option value="Варіант 3">
</datalist>Атрибути
Цей тег може мати глобальні атрибути.
Важливі примітки
Для зв'язування <datalist> з елементом <input>, атрибут id тега <datalist> має збігатися з атрибутом list тега <input>.
Кожен варіант у списку визначається за допомогою тега <option>.
Технічне резюме
| Категорії вмісту | |
|---|---|
| Дозволений вміст | Або фразовий вміст, або нуль чи більше елементів |
| Пропуск тега | Ні, початковий і кінцевий теги є обов’язковими. |
| Дозволені батьківські елементи | Будь-який елемент, що приймає фразовий вміст. |
| Роль ARIA |
|
| Дозволені ролі ARIA | Ніякі |
| DOM-інтерфейс |
|
Приклади використання
<label for="browser-choice">Оберіть ваш улюблений браузер:</label>
<input list="browsers" id="browser-choice" name="browser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>Підтримка браузерів
datalist |
|---|