<datalist>
Список подсказок для текстового поля: можно выбрать вариант или ввести свой.
Синтаксис
<input list="ids">
<datalist id="ids"><option value="…"></datalist>Атрибуты
| Параметр | Тип | Описание |
|---|---|---|
| id | text | Имя списка; поле подключает его атрибутом `list`. |
Примеры
Поле с подсказками:
<label for="city">City</label>
<input id="city" list="cities" placeholder="Start typing">
<datalist id="cities">
<option value="Berlin">
<option value="London">
<option value="Paris">
</datalist>Примечания
В отличие от <select>, пользователь не ограничен вариантами из списка. Вид подсказок задаёт браузер, и стилизовать их через CSS нельзя.
См. также
- <input> — Поле ввода; вид поля задаёт атрибут `type`.
- <select> — Выпадающий список вариантов.
- <option>, <optgroup> — Пункт списка `<select>` или `<datalist>`; `<optgroup>` объединяет пункты в группы.
Вопросы и ответы по теме
В учебнике
- Списки выбора и многострочный текст — Выпадающий список select и option, группы optgroup, выбор нескольких вариантов, textarea и подсказки datalist.