Елемент <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>Chrome</option>

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

<option value="ua">Ukraine</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="es">Spaine</option>
<option value="fr">France</option>