Home » HTML, CSS e Javascript » HTML5: Criando datalists

0

O HTML 5 já é suportado por todos os navegadores modernos e já podemos usar com segurança os recursos fornecedos por ele. Já é um velho conhecido nosso a tag <select> que fornece uma lista de itens para preencher um formulário. Na tag <select> definimos alguns itens fixos. Agora imagina que você queira fornecer um campo de texto simples com uma lista pré-definida de itens, seja para ajudar na escolha, seja para dar dicas de preenchimento. Para isso existe a tag <datalist> que, junto com um campo input list, fornece itens para “auto-preencher”.

Veja um exemplo abaixo:

Na linha 1 criamos um input list navegadores e com a tag <datalist> podemos informar uma série de itens para preenchimento. Conforme a pessoa digitar a lista será modificada mostrando somente quais itens coincidirem com o que foi digitado. Veja um exemplo.

Fique atento quando criar este tipo de campo porque, mesmo que você defina a lista de itens o visitante poderá escrever qualquer coisa no input.

Cadastre seu e-mail para receber as novidades do blog

Tags:

Deixe um comentário