Bootstrap 5 Элементы управления формами Datalists

Bootstrap 5 — это новейшая версия Bootstrap, которая является самой популярной платформой HTML, CSS и JavaScript для создания адаптивных веб-сайтов, ориентированных на мобильные устройства. Он был официально выпущен 16 июня 2020 года после нескольких месяцев переопределения его функций.

Списки данных элементов управления формы Bootstrap 5 используются для создания группы параметров (группы элементов <option>), доступ к которым можно получить с помощью элемента ввода. Он похож на элемент <select>, но разница в том, что он имеет больше ограничений и различий в стилях меню.

Список используемых тегов:

• <input>: используется для создания поля ввода.
• <datalist>: используется для обеспечения функции автозаполнения в файлах HTML.
• <опция>: используется для выбора опции из выпадающего меню.

Синтаксис:

<label for="datalist" class="form-label">
    Datalist Label
</label>
<input class="form-control" list="gfglist" 
    id="datalist" placeholder="search...">
<datalist id="gfglist">
      <option value="...">
      ...
</datalist>

Пример 1. В этом примере мы создадим список данных с группой параметров.

Выход:

Пример 2. В этом примере мы создадим список данных с группой параметров цвета.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/forms/form-control/#datalists