<datalist>: Elemento DATALIST
Última atualização: 2026-10-13
<datalist>Elemento DATALIST
Oferece uma lista de valores sugeridos para um input (com dica de menu suspenso) permitindo digitação livre; combine com o atributo list do input.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </datalist> tag |
| Status | Padrão |
📝 Sintaxe
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <datalist> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： datalist é invisível por si só; é referenciado via atributo list do input; o estilo da dica varia por navegador.
❓ Perguntas Frequentes
QQual é a diferença entre datalist e select?
A
<datalist> combina com <input list> para oferecer «digitação livre + sugestões selecionáveis»: o usuário digita o que quiser ou escolhe da lista; <select> só deixa escolher entre opções fixas. Valor fixo obrigatório: select; digitação permitida: datalist.QComo associar datalist ao input?
AO datalist recebe um
id e o input recebe o atributo list com o mesmo nome: <input list='cidades'><datalist id='cidades'>…</datalist>. Um datalist pode atender vários inputs; o inverso não — cada input liga a um único datalist por vez.QA compatibilidade do datalist tem problemas?
ATodos os navegadores modernos suportam, mas a interação varia muito: Chrome mostra seta de dropdown, Safari mostra camada flutuante de sugestões. E não há como estilizar as sugestões — aceite essas limitações de antemão ou troque por um componente de autocomplete em JS.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
