Тег HTML `<datalist>`

Тег <datalist> является одним из элементов HTML5. Он используется для создания списка вариантов ввода, определяемых внутри элемента <datalist> и связанных с полем <input> через атрибут list. Изначально варианты скрыты, и список становится доступным, когда пользователь начинает вводить текст. Атрибут list тега <input> должен совпадать с id элемента <datalist>.

Предопределенные варианты ввода заключены во вложенные <option> элементы.

Синтаксис

Тег <datalist> является парным. Содержимое записывается между открывающим (<datalist>) и закрывающим (</datalist>) тегами.

Пример использования тега HTML `<datalist>`:

Тег HTML <datalist>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>Choose browser</div>
    <input list="browsers" />
    <!-- The list attribute value matches the datalist id -->
    <datalist id="browsers">
      <option value="Opera">
      <option value="Safari">
      <option value="Firefox">
      <option value="Google Chrome">
      <option value="Maxthon">
    </datalist>
  </body>
</html>

Try it Yourself »

Результат

Выберите браузер

Атрибуты

Тег <datalist> поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

В каком случае используется тег HTML <datalist>?

Он задает список предопределенных вариантов для элемента <input>.Он используется для вставки изображений на веб-страницу.Он определяет подпись для элемента <figure>.Он обеспечивает функцию автозаполнения для полей формы.Он используется для создания анимированной графики.

Тег HTML <datalist> ​

Синтаксис ​

Пример использования тега HTML <datalist>: ​

Результат ​