HTML-тег <datalist>

Характеристики

• Тип: строчный, статичный, семантический
• Назначение: Предоставляет список вариантов для элемента <input> с атрибутом list.
• Родители: Любые элементы, допускающие размещение потокового контента.
• Потомки: <option> элементы.
• Глобальные атрибуты: все
• Атрибуты событий: все

Пример использования

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Opera">
  <option value="Edge">
</datalist>

Использование в JavaScript

// Добавление нового варианта
const datalistElement = document.querySelector('datalist');
const optionElement = document.createElement('option');
optionElement.value = 'Internet Explorer';
datalistElement.appendChild(optionElement);

Рекомендации по обеспечению доступности (a11y)

• Облегчает ввод данных пользователям, предоставляя список вариантов.
• Убедитесь, что <input> связан с <datalist> через атрибут list.

Полезные ссылки

• Статья на Doka.guide о <datalist>