Елемент Datalist

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

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

Example

When the user starts typing in the category input field, the browser will display the predefined categories from the datalist. If none of the options match the user's input, they can still type their own category. This allows the user to choose from a list and manually input a value if necessary.

• <label for="category">: labels the input field, indicating to the user that they should select or enter a product category;
• <input type="text" name="category" id="category" list="categories" />: the input field where the user can either type a category or select from the available options. The list="categories" attribute links this input to the datalist with the ID categories;
• <datalist id="categories">: this contains a list of predefined product categories. These options will appear as suggestions when the user starts typing in the input field;
• <option value="...">: each option represents a product category in the list. The user can select one of these categories or type their own value if it doesn’t match any of the options.