doctor Brain

мир глазами веб-разработчика

HTML: datalist

создаем набор подсказок для поля ввода с помощью HTML

2024-10-05 dr.Brain

время чтения 1 мин.

Photo by Javier Allegue Barros on Unsplash

Заполнение поля ввода input type="text" можно значительно облегчить, добавив ему атрибут list с уникальным идентификатором и набор подсказок datalist (с дочерними HTML-элементами option).

<input type="text" list="planets">
<datalist id="planets">
    <option value="Меркурий"></option>
    <option value="Венера"></option>
    <option value="Земля"></option>
    <option value="Марс"></option>
    <option value="Юпитер"></option>
    <option value="Сатурн"></option>
    <option value="Уран"></option>
    <option value="Нептун"></option>
</datalist>

Дополнительная информация на MDN

Спасибо за внимание.