Datalist em HTML
Antes, select forçava uma escolha fechada. Datalist é outro trabalho: escreve num input normal e o browser sugere. Pode escolher ou escrever algo não listado.
Porque o datalist existe
Pesquisa, cor e cidade precisam de respostas comuns sem proibir as raras. select rejeita fora da lista; input vazio não sugere. datalist preenche o espaço com dicas e texto livre.
Resposta direta
1) datalist com option value. 2) list no input = id. 3) label e name no input — o datalist não submete. 4) Sugestão ou texto próprio OK. 5) Use select quando tiver de ser só da lista.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
Demo de sugestões de browser
Campo Browser de Firefox a Safari. Escrever Brave funciona — a lista não bloqueia.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
Ler o demo do browser
- Quem submete é o input, não o datalist
- list deve coincidir com id
- Cada option value é uma sugestão
- name chaveia o valor do input
- label nomeia o campo
- Ao contrário do select, não fica limitado a quatro nomes
Sugestões de cidade com datalist
Segundo excerto: sugere cidades e ainda permite uma aldeia. Contraste com o select fechado anterior.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
Ler o demo da cidade
- Mesmo padrão label e name
- list/id liga as dicas
- Submetido = texto do input
- autocomplete=off opcional
- Seguinte: accessibility mais ampla
Escolher datalist vs select vs input
- Conjunto fixo obrigatório: select
- Dicas + texto livre: input + list + datalist
- Sem sugestões: input simples
- datalist não substitui label nem name
- Não aninhe o datalist no input; ligue por id
Prática — ligar sugestões
- Quinta option Opera
- Quebre o id de propósito e corrija
- Escreva um nome personalizado
- Acrescente Mashhad às cidades
- Refaça como select; uma frase de diferença
- Frase: datalist sugere; select restringe
- Nomeação acessível na lição seguinte
Erros fáceis
- list e id não coincidem
- Esperar rejeição do texto livre
- Esquecer label
- Esquecer name no input
- name no datalist
- option vazio sem value
- Mentalidade só-select em campo livre
Resumo
- datalist + option value = sugestões para input
- Emparelhe list e id
- Escrever fora da lista é permitido
- label e name no input
- Use select para escolha fechada
- Seguinte: accessibility
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo