O elemento <datalist> em HTML é utilizado para criar uma lista predefinida de opções para um elemento <input>. Ele permite que o usuário selecione uma opção da lista, mas também oferece a possibilidade de digitar um valor próprio, caso deseje. A lista de valores predefinidos permanece oculta até que o usuário comece a digitar no campo de texto associado. O <datalist> é associado a um atributo id, e o <input> é vinculado a ele utilizando o atributo list.

De modo geral, o elemento <datalist> pode ser uma forma útil de fornecer uma lista predefinida de opções para seleção dos usuários, mantendo a flexibilidade para que eles insiram um valor próprio, se necessário.

Exemplo

Quando o usuário começa a digitar no campo de entrada category, o navegador exibirá as categorias predefinidas do datalist. Se nenhuma das opções corresponder ao que o usuário digitou, ele ainda poderá inserir sua própria categoria. Isso permite que o usuário escolha de uma lista e insira manualmente um valor, se necessário.

• <label for="category">: rotula o campo de entrada, indicando ao usuário que ele deve selecionar ou inserir uma categoria de produto;

• <input type="text" name="category" id="category" list="categories"/>: campo de entrada onde o usuário pode digitar uma categoria ou selecionar entre as opções disponíveis. O atributo list="categories" vincula este campo ao datalist com o ID categories;

• <datalist id="categories">: contém uma lista de categorias de produto predefinidas. Essas opções aparecerão como sugestões quando o usuário começar a digitar no campo de entrada;

• <option value="...">: cada option representa uma categoria de produto na lista. O usuário pode selecionar uma dessas categorias ou digitar seu próprio valor caso não corresponda a nenhuma das opções.