Основний вміст

  • <body>

Тег <datalist>

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.0+20.0+9.6+4.0+

Опис

Створює список варіантів, які можна вибирати при введенні в текстове поле. Початково цей список прихований і стає доступним при отриманні фокусу полем або введенні тексту.

Синтаксис

<input list="<ідентифікатор>">
<datalist id="<ідентифікатор>">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

Атрибути

Список, створений тегом <datalist>, пов'язується з текстовим полем за допомогою атрибута id. Його значення повинно співпадати зі значенням атрибута list тега <input>.

Закриваючий тег

Обов'язковий.

Приклад

HTML 5IE 10CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>datalist</title>
 </head>
 <body>
  <p>Оберіть улюбленого персонажа:</p>
  <p><input list="character">
   <datalist id="character">
    <option value="Чебурашка"></option>
    <option value="Крокодил Гена"></option>
    <option value="Шапокляк"></option>
   </datalist></p>
 </body> 
</html>

Результат прикладу у браузері Opera показано на рис. 1.

Браузери

Internet Explorer до версії 10.0 відображає список всередині <datalist> у вигляді тексту, інші браузери, які не підтримують цей тег, приховують список.

HTML5

Часті запитання

  • Q: Як використовувати тег <datalist> в HTML?

    A: Тег <datalist> використовується разом з тегом <input>, щоб створити список варіантів для поля введення. Перелік варіантів задається за допомогою елементів <option> всередині тегу <datalist>.

  • Q: Які атрибути можна використовувати з тегом <datalist>?

    A: Основні атрибути для тегу <datalist> - id, який ідентифікує список варіантів, та name, який пов'язує список з полем введення.

  • Q: Як зробити так, щоб варіанти в <datalist> з'являлися тільки після введення певної кількості символів?

    A: Це можна зробити за допомогою JavaScript, слухаючи події введення в поле <input> та динамічно змінюючи список варіантів у <datalist> відповідно до введених символів.

  • Q: Чи підтримує браузер Internet Explorer тег <datalist>?

    A: Internet Explorer не підтримує тег <datalist> до версії 10 включно. Рекомендовано використовувати альтернативні способи для створення автозаповнення.

  • Q: Чи можна стилізувати випадаючий список варіантів у <datalist> за допомогою CSS?

    A: На жаль, елемент <datalist> не підтримує стилізацію через CSS. Однак ви можете стилізувати саме поле введення <input>, що взаємодіє з <datalist>.