HTML

Para que serve a tag datalist e quando utilizar?

13 de julho de 2020

Para que serve a tag datalist e quando utilizar?

Neste artigo veremos para que serve a tag datalist e também como você pode utilizá-la em seus projetos para tirar o proveito do HTML semântico

para que serve a tag datalist capa

Fala programador(a), tudo bem? Vamos aprender mais sobre HTML e também HTML semântico!

O elemento datalist é um tanto novo no HTML, ele foi criado na versão que é chamada de HTML5

Ele é semelhante a um select, porém com um diferencial

Que é o autocompletar de opções conforme o usuário digita algum texto que corresponde as opções inseridas

Além disso possui a funcionalidade de selecionar opções manualmente, como no select

Outra vantagem do datalist é que o texto de value e o texto do elemento aparecem na combo box, permitindo que façamos uma estilização diferente do select

Vamos ver um exemplo prático:

<label>Lista de navegadores</label>
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome"> Versão 1.0
  <option value="Firefox"> Versão 2.5
  <option value="Internet Explorer"> Versão 13.0
  <option value="Opera"> Versão 5.0
  <option value="Safari"> Versão 2.0
</datalist>


Veja como é representado no navegador:

datalist ex html

Além do autocompletar, como foi mencionado, você tem a funcionalidade de colocar uma espécie de legenda, além do value

Conclusão

Neste artigo vimos para que serve a tag datalist

Que é basicamente um select com auto completar, o que é muito bom pois não precisamos mais utilizar o jQuery para fazer esta funcionalidade, por exemplo

Agora você já pode aplicá-lo em seus projetos 🙂

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x