Tag HTML <datalist>
A tag HTML <datalist> cria uma lista de opções predefinidas para o elemento <input>. Aprenda a usá-la com exemplos práticos.
A tag <datalist> é um dos elementos HTML5. Ela fornece uma lista de sugestões predefinidas para um campo <input>, oferecendo um menu suspenso no estilo de autocompletar enquanto ainda permite que o utilizador digite qualquer valor que desejar. À medida que o utilizador começa a digitar, o navegador filtra as sugestões e exibe as que correspondem.
É isso que diferencia o <datalist> de um menu <select>: um <select> restringe o utilizador a um conjunto fixo de opções, enquanto um <datalist> apenas sugere valores — o campo permanece como texto livre.
As opções predefinidas são incluídas em elementos <option> aninhados.
Como as três partes se conectam
Uma datalist funcional envolve sempre três partes que você conecta pelo id:
- Um elemento
<input>com um atributolist. - Um elemento
<datalist>cujoidcorresponde ao valor delist. - Um ou mais elementos
<option>dentro do<datalist>que contêm as sugestões.
<input list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Vanilla"></option>
<option value="Strawberry"></option>
</datalist>A ligação é feita puramente pelo nome: o valor de list no input ("ice-cream-flavors") deve ser idêntico ao id do <datalist>. Se não corresponderem exatamente, nenhuma sugestão é exibida. O próprio <datalist> não é mostrado na página — apenas suas opções aparecem, dentro do menu suspenso do input.
Os elementos filhos <option>
Cada sugestão é um único elemento <option>. Existem duas formas de fornecer seu texto:
- Atributo
value— o texto inserido no input quando a opção é escolhida. - Rótulo visível — texto entre as tags de abertura e fechamento, exibido ao utilizador.
Se você definir apenas value, essa mesma string é tanto exibida quanto inserida:
<option value="Firefox"></option>Você também pode combinar um valor técnico com uma descrição mais amigável usando o atributo label (ou texto de rótulo), que alguns navegadores exibem junto ao valor:
<option value="FF" label="Firefox"></option>Aqui o input recebe FF, enquanto o menu suspenso pode mostrar o mais legível Firefox. A renderização de pares de valor/rótulo separados varia entre navegadores, portanto, na maioria dos casos, manter o value legível por humanos é a abordagem mais simples e confiável.
<datalist> vs. <select>
Ambos apresentam uma lista de opções, mas resolvem problemas diferentes:
<datalist> | <select> | |
|---|---|---|
| Entrada do utilizador | Texto livre — pode digitar qualquer coisa | Restrito às opções listadas |
| Papel da lista | Sugestões / autocompletar | Os únicos valores permitidos |
| Filtrar ao digitar | Sim, filtra enquanto digita | Limitado |
| Valor enviado | O que estiver no campo | Sempre uma das opções |
| Use quando | Quer dicas mas permite valores personalizados (caixa de pesquisa, domínio de e-mail, cidade) | A resposta deve ser uma de um conjunto fixo (código de país, nível de plano) |
Use <datalist> quando as sugestões ajudam mas um valor personalizado ainda é válido; use <select> quando apenas os valores oferecidos são aceitáveis.
Sintaxe
A tag <datalist> vem em pares. O conteúdo é escrito entre as tags de abertura (<datalist>) e fechamento (</datalist>).
Exemplo da tag HTML <datalist>:
Tag HTML <datalist>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="browser">Choose browser</label>
<input list="browsers" id="browser" />
<!-- The list attribute value matches the datalist id -->
<datalist id="browsers">
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Firefox"></option>
<option value="Google Chrome"></option>
<option value="Maxthon"></option>
</datalist>
</body>
</html>Usar um <label> real (em vez de um <div> simples) e apontar seu atributo for para o id do input conecta a legenda ao campo, para que leitores de tela o anunciem e ao clicar no rótulo o foco vá para o input.
Exemplo: um seletor de país
Uma datalist funciona bem para inputs com muitos valores conhecidos onde você ainda quer permitir texto livre — como selecionar um país dentro de um formulário:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="country">Your country</label>
<input list="countries" id="country" name="country" />
<datalist id="countries">
<option value="Argentina"></option>
<option value="Brazil"></option>
<option value="Canada"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Japan"></option>
<option value="United States"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>Suporte dos navegadores
O <datalist> é suportado por todos os navegadores modernos de desktop. Esteja ciente das ressalvas para mobile: o suporte no iOS Safari tem sido historicamente incompleto ou inconsistente entre versões, e alguns navegadores mais antigos ou menos comuns ignoram o elemento completamente. Como o campo é apenas um input de texto normal, navegadores que não renderizam as sugestões simplesmente mostram um input simples — portanto, use <datalist> como uma melhoria progressiva, e não como a única forma de indicar valores válidos.
Atributos
A tag <datalist> não possui atributos específicos do elemento. Toda a sua conexão é feita pelo id (correspondido pelo atributo list do input), e as sugestões vivem nos elementos filhos <option>. Ela suporta os Atributos Globais e os Atributos de Evento.