Використання елемента Datalist для попередньо визначених підказок введення

Елемент <datalist> в HTML використовується для створення попередньо визначеного списку варіантів для елемента <input>. Це дозволяє користувачу обирати варіант зі списку, а також дає можливість ввести власне значення за потреби. Список попередньо визначених значень залишається прихованим, доки користувач не почне вводити текст у відповідне текстове поле. Елемент <datalist> поєднується з атрибутом id, а <input> зв'язується з ним за допомогою атрибута list.

Загалом, елемент <datalist> може бути корисним способом надати користувачам попередньо визначений список варіантів для вибору, при цьому залишаючи їм можливість ввести власне значення за потреби.

Приклад

Коли користувач починає вводити текст у полі введення category, браузер відображає попередньо визначені категорії з datalist. Якщо жоден із варіантів не відповідає введеному тексту, користувач все одно може ввести власну категорію. Це дозволяє обирати зі списку або вручну вводити значення за потреби.

• <label for="category">: підписує поле введення, вказуючи користувачу, що потрібно вибрати або ввести категорію товару;

• <input type="text" name="category" id="category" list="categories"/>: поле введення, у якому користувач може ввести категорію або вибрати одну з доступних опцій. Атрибут list="categories" пов'язує це поле з datalist з ідентифікатором categories;

• <datalist id="categories">: містить список попередньо визначених категорій товарів. Ці варіанти з'являються як підказки під час введення тексту у полі;

• <option value="...">: кожен option представляє категорію товару у списку. Користувач може вибрати одну з цих категорій або ввести власне значення, якщо жоден варіант не підходить.