Datalist Tag em Html
Neste artigo, discutiremos a tag Datalist . Desejando que isso atendesse aos requisitos de aprendizado.
A tag datalist em HTML é usada para fornecer uma lista predefinida de opções ao usuário quando ele está preenchendo um formulário. Quando um usuário digita em um campo de entrada que possui um atributo de lista apontando para um elemento datalist , uma lista suspensa de opções aparecerá, com base nos valores do elemento datalist.
Uma lista de dados que consiste em valores predefinidos (anexados a um elemento <input>):
Example
Aqui está outro exemplo que mostra o funcionamento da tag <datalist> em HTML:
Example:
Datalist Tag - Usos e Definição
Uma tag Datalist <datalist> indica uma lista de valores padrão para um elemento de entrada.
A tag <datalist> permite que você forneça um recurso de “autocomplete” para elementos <input> . Uma lista suspensa de opções predefinidas acompanhará a entrada de dados.
É necessário que o atributo id do elemento <datalist> corresponda ao atributo list do elemento <input> (ao fazer isso, eles são vinculados).
Compatibilidade do navegador
Na tabela, os números indicam qual versão do navegador deu suporte ao elemento pela primeira vez.
| Elemento |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <lista de dados> | 20,0 | 10,0 | 4.0 | 12.1 | 9.5 |
Atributos Globais
Tags <datalist> em HTML também são compatíveis com atributos globais.
Atributos do Evento
Em HTML, a tag <datalist> também aceita atributos de evento .
Configurações padrão de CSS
A maioria dos navegadores mostrará o elemento <datalist> com os seguintes valores por padrão em
display: none;
}
Benefícios da tag HTML Datalist
A tag <datalist> em HTML oferece vários benefícios, incluindo:
- A tag <datalist> pode melhorar a experiência do usuário, fornecendo aos usuários uma lista de opções predefinidas para escolher enquanto digitam em um campo de formulário. Isso economiza tempo e esforço para o usuário, tornando o formulário mais amigável e eficiente.
- A tag <datalist> pode ser usada de várias maneiras para aprimorar diferentes tipos de formulários. Por exemplo, pode ser usado para seleção de data, seleção de produto, seleção de local e muito mais.
- A tag <datalist> também pode melhorar a acessibilidade de um formulário. Os leitores de tela podem ler as opções no elemento datalist, facilitando a navegação e o preenchimento do formulário por usuários com deficiências.
- A tag <datalist> pode ser personalizada para se adequar ao design e estilo de um site. Os desenvolvedores podem usar CSS para alterar a aparência da lista suspensa ou adicionar funcionalidade personalizada usando JavaScript.
- A tag <datalist> é suportada por todos os navegadores da Web modernos, tornando-a uma ferramenta confiável e amplamente utilizada para aprimorar formulários.
