Елемент <datalist>
Елемент <datalist> використовується для створення списку варіантів для введення на основі даних, які надаються в атрибуті list елемента <input>. Це дає можливість користувачам обирати варіанти зі списку, який виводиться при введенні тексту у відповідне поле вводу.
Тобто елементу <input> задають атрибут list з певним іменем.
І елементу <datalist> задають атрибут id з таким само іменем.
А в елементах <option> у його атрибуті value задають варіанти автозаповнення.
<label for="browser">Оберіть браузер:</label>
<input list="browsers" id="browser" name="browser" placeholder="Введіть назву браузера">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>Можна також елемент option записувати таким синтаксисом:
Елемент <option> може одночасно мати і вміст і атрибут value. Це корисно, якщо текст опції та значення не збігаються.
Last updated