html.okpython.net
Основы создания сайтов
HTML :: Тег <datalist>
В HTML тег <datalist> (от англ. data list – перечень данных) создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования.
Синтаксис
<input list="Идентификатор">
<datalist id="Идентификатор">
<option value="Вариант 1">
<option value="Вариант 2">
</datalist>
Закрывающий тег: обязателен.
Атрибуты
- id – данный глобальный атрибут имеет для элемента дополнительный смысл: его значение должно совпадать со значением атрибута list элемента <input>.
- Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/datalist
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <form action="php/registration.php" method="POST" name="reg_form"> <label> Вид единоборства: <!-- Связываем данное поле с элементом «datalist» --> <!-- при помощи атрибута «list» --> <input type="text" name="box" list="sport"> </label> <!-- Обязательно задаем атрибут «id» --> <datalist id="sport"> <option value="box"> <option value="karate"> <option value="judo"> </datalist><br><br> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1