0Pricing
HTML Academy · Aula

Datalist para preenchimento automático

Sugira valores de entrada com o elemento datalist.

Datalist para preenchimento automático é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que é datalist?

O elemento <datalist> fornece uma lista de sugestões predefinidas para um <input>:

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalist versus select

Diferença principal entre <datalist> e <select>:

  • datalist — texto livre + sugestões (o usuário pode digitar qualquer coisa)
  • select — escolha restrita (o usuário deve escolher da lista)

Use datalist quando quiser sugerir valores sem restringir a entrada.

Vinculando datalist a input

O atributo list em <input> deve corresponder ao id de <datalist>:

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

datalist com diferentes tipos de entrada

<datalist> funciona com muitos tipos de entrada:

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

label de option em datalist

As opções em datalist podem ter um rótulo visível e um valor enviado:

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

Filtrando sugestões

O navegador filtra as sugestões conforme o usuário digita:

  • O algoritmo de correspondência varia de acordo com o navegador
  • Alguns fazem a correspondência desde o início; outros, em qualquer parte da cadeia de texto
  • Não é possível controlar o comportamento de filtragem do navegador
  • Para obter uma filtragem personalizada, crie um componente personalizado de preenchimento automático com ARIA

datalist dinâmico com JavaScript

Atualize as opções de datalist dinamicamente:

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

Acessibilidade de datalist

Considerações de acessibilidade para datalist:

  • Os leitores de tela anunciam as sugestões como uma lista de opções
  • Os usuários podem navegar pelas sugestões com as teclas de seta
  • A entrada continua aceitando texto livre — certifique-se de que a validação trate esse caso

Observações sobre suporte dos navegadores

O suporte dos navegadores a datalist é bom, mas há algumas particularidades:

  • Chrome, Edge e Firefox: suporte completo
  • Safari: compatível a partir do Safari 12.1+
  • Navegadores móveis: a maioria exibe sugestões, mas a interface varia
  • Sempre faça testes nos navegadores-alvo antes de depender de datalist

Quando não usar datalist

Datalist não é ideal quando:

  • É necessária uma validação rigorosa (o usuário deve escolher da lista)
  • É necessária uma estilização personalizada das opções (o navegador controla toda a aparência)
  • É necessário agrupar opções (optgroup não é compatível com datalist)

Nesses casos, use um componente personalizado de preenchimento automático com ARIA role="combobox".

datalist versus entrada de pesquisa

Compare datalist com uma entrada de pesquisa que use preenchimento automático:

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

Verificação rápida

Como vincular uma entrada ao seu elemento datalist?

Recapitulação: datalist

Essenciais de datalist:

  • <datalist id> + <input list> — vinculados por meio da correspondência entre id e list
  • O usuário pode digitar livremente ou escolher uma sugestão
  • Use <select> quando a escolha precisar ser restrita
  • Funciona com texto, intervalo, cor e outros tipos de entrada
  • As sugestões são filtradas conforme o usuário digita

Perguntas Frequentes

A aula “Datalist para preenchimento automático” é grátis?

Sim — o texto completo de “Datalist para preenchimento automático” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Datalist para preenchimento automático”?

Sugira valores de entrada com o elemento datalist. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Datalist para preenchimento automático”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Menus pendentes select e option
  2. Textarea para entrada de várias linhas
  3. Grupos de caixas de seleção e botões de opção
  4. Datalist para preenchimento automático
← Voltar para HTML Academy