English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по HTML

Полный список тегов HTML

Тег <datalist> в HTML

Элемент HTML <datalist> содержит группу элементов <option>, которые представляют собой значения, доступные для других контроллеров формы; тег <datalist> - это элемент HTML5, который определяет список предложенных значений для тега <input>. Эти предложенные значения будут отображаться в виде выпадающего списка, и при вводе данных в контроллер ввода доступные варианты будут фильтроваться. Этот тег также часто называют <datalist&

Онлайн пример

Ниже приведен элемент <input>, в котором описаны возможные значения в <datalist>:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Использование тега datalist в HTML5 (Учебный сайт oldtoolbag.com)</title>
</head>
<body>
 <label for="tutorial_choice">Тutorials: </label>
  <input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">
  <datalist id="tutorial_types">
    <option value="HTML">
    <option value="CSS">
    <option value="SQL">
  </datalist>
</body>
</html>
Проверьте <‹/›>

В этом примере документа HTML5 мы используем тег <datalist> для создания списка предложенных значений для тега <input>. Рекомендуется использовать 3 значения (HTML, CSS и SQL), которые будут отображаться в виде выпадающего списка для выбора пользователем.

Совместимость браузеров

Тег <datalist> поддерживается основными браузерами:

IEFirefoxOperaChromeSafari

Определение и описание использования тегов

Элемент <datalist> HTML находится внутри тега <body>. Тег <datalist> обычно находится внутри тега <form>.

Тег <datalist> содержит набор тегов <option>, которые предоставляют возможные значения для связанного тега <input>.

Тег <datalist> определяет список возможных значений для элемента <input>.

Тег <datalist> используется для предоставления функции "автоматического заполнения" для элемента <input>. Пользователь видит список, в котором есть предварительно определенные значения, которые будут использоваться в качестве данных ввода.

Используйте атрибут list элемента <input>, чтобы связать элемент <datalist>.

Различия между HTML 4.01 и HTML5

Тег <datalist> - это новый тег в HTML5.

Глобальные атрибуты

Поддержка тега <datalist> Глобальные атрибуты HTML.

Событийные атрибуты

Поддержка тега <datalist> Событийные атрибуты HTML.