Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Usando o Elemento Datalist para Sugestões de Entrada Predefinidas | Formulários HTML e Entrada do Usuário
HTML Definitivo
course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Usando o Elemento Datalist para Sugestões de Entrada Predefinidas

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.

html

index.html

copy

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.

html

index.html

copy
  • <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.

1. Qual elemento HTML é utilizado para criar uma lista suspensa com múltiplas opções?

2. Qual é a finalidade do elemento datalist?

3. Qual atributo é utilizado para vincular um elemento datalist a um elemento input?

question mark

Qual elemento HTML é utilizado para criar uma lista suspensa com múltiplas opções?

Select the correct answer

question mark

Qual é a finalidade do elemento datalist?

Select the correct answer

question mark

Qual atributo é utilizado para vincular um elemento datalist a um elemento input?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 9

Pergunte à IA

expand
ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

HTML Definitivo

HTML Definitivo

1. Compreendendo o Desenvolvimento Web
2. Tags e Atributos HTML
3. Estrutura do Documento HTML
4. Trabalhando com Mídia e Tabelas

book
Usando o Elemento Datalist para Sugestões de Entrada Predefinidas

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.

html

index.html

copy

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.

html

index.html

copy
  • <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.

1. Qual elemento HTML é utilizado para criar uma lista suspensa com múltiplas opções?

2. Qual é a finalidade do elemento datalist?

3. Qual atributo é utilizado para vincular um elemento datalist a um elemento input?

question mark

Qual elemento HTML é utilizado para criar uma lista suspensa com múltiplas opções?

Select the correct answer

question mark

Qual é a finalidade do elemento datalist?

Select the correct answer

question mark

Qual atributo é utilizado para vincular um elemento datalist a um elemento input?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 9
Sentimos muito que algo saiu errado. O que aconteceu?
some-alt