Opções de Entrada Predefinidas em HTML: Funcionalidade de Preenchimento Automático

Introdução

A tag HTML datalist é utilizada para fornecer uma lista de opções predefinidas que aparecem quando um utilizador está a digitar num campo de entrada. Este laboratório irá ensiná-lo a usar a tag datalist para habilitar a funcionalidade de preenchimento automático (autocomplete) num formulário.

Nota: Pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Depois, pode atualizar o separador Web 8080 para visualizar a página web.

Adicionando o Campo de Entrada

Crie um ficheiro HTML chamado "index.html".

Adicione um campo de entrada ao seu ficheiro HTML usando a tag <input>.

<input type="text" id="car-brand" />

Criando a Datalist

Crie uma datalist usando a tag <datalist> e o atributo id.

<datalist id="car-brands"> </datalist>

Adicionando Opções à Datalist

Adicione algumas opções à datalist usando a tag <option>.

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

Vinculando o Campo de Entrada à Datalist

Vincule o campo de entrada à datalist usando o atributo list e definindo seu valor para o ID da datalist.

<input type="text" id="car-brand" list="car-brands" />

Salve as alterações e teste a funcionalidade de preenchimento automático (autocomplete) no formulário com várias marcas de carros.

Resumo

Seguindo estes passos simples, você pode implementar a tag datalist em seu código HTML para fornecer funcionalidade de preenchimento automático (autocomplete) em um formulário. A tag datalist permite que os usuários selecionem de uma lista de opções predefinidas, ao mesmo tempo em que oferece a capacidade de inserir valores fora das opções predefinidas, se necessário.