Атрибут list тега <input>
Описание
Атрибут list связывает элемент <input> с элементом <datalist>, предоставляя пользователю список предопределённых вариантов для автозаполнения. При вводе текста появляется выпадающий список с подсказками.
<label for="browser">Выберите браузер:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
Особенности работы:
| Элемент | Назначение | Обязательность |
|---|---|---|
<input list="id"> |
Связывает поле с datalist | Обязательно |
<datalist id="id"> |
Содержит варианты выбора | Обязательно |
<option> |
Элементы списка | Хотя бы один |
Пример с разными типами input:
<!-- Для текстового поля -->
<input list="cities" placeholder="Выберите город">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
</datalist>
<!-- Для поля числа -->
<input type="number" list="quantities" min="1" max="10">
<datalist id="quantities">
<option value="1">
<option value="5">
<option value="10">
</datalist>
Динамическое заполнение datalist:
<input list="dynamic-list" id="product-input">
<datalist id="dynamic-list"></datalist>
<script>
const products = ['Ноутбук', 'Смартфон', 'Планшет'];
const datalist = document.getElementById('dynamic-list');
products.forEach(product => {
const option = document.createElement('option');
option.value = product;
datalist.appendChild(option);
});
</script>
Рекомендации:
- Используйте для полей с предопределёнными вариантами (города, страны)
- Сочетайте с атрибутом
placeholderдля подсказки - Для больших списков (100+ элементов) используйте AJAX-подгрузку
- Всегда предусматривайте возможность ручного ввода
Пример с группировкой вариантов:
<input list="food-list" placeholder="Выберите блюдо">
<datalist id="food-list">
<optgroup label="Горячие блюда">
<option value="Суп">
<option value="Плов">
</optgroup>
<optgroup label="Напитки">
<option value="Чай">
<option value="Кофе">
</optgroup>
</datalist>
Ограничения:
- Не поддерживается в Safari до версии 12.1
- Стилизация выпадающего списка ограничена
- Нет встроенной валидации выбранного значения
- Для сложных сценариев лучше использовать JavaScript-библиотеки
Примечание: Атрибут list предоставляет удобный способ предложить пользователю варианты выбора, сохраняя возможность ввода произвольного значения. Это делает его идеальным для форм, где большинство пользователей выбирает стандартные варианты, но иногда требуется ввод уникальных значений.