Neste tutorial, aprenderá a criar listas de sugestões para campos de entrada utilizando o elemento datalist em HTML. Esta funcionalidade permite-lhe ajudar o utilizador a introduzir dados, apresentando sugestões baseadas em valores existentes. Isto torna a introdução de dados mais fácil para o utilizador e reduz a probabilidade de erros de digitação.
Principais conclusões
- O elemento datalist permite a definição de uma lista de sugestões que podem ser utilizadas em conjunto com um campo de entrada.
- Para criar um elemento de lista de dados, é necessário atribuir-lhe uma ID e fazer referência a essa ID no atributo de lista do campo de entrada.
- Os utilizadores podem escolher entre as sugestões ou fazer as suas próprias entradas.
- Com um pouco de JavaScript, pode personalizar a interação do utilizador com a extensão da lista de dados.
Guia passo-a-passo
Primeiro, vamos certificar-nos de que temos a configuração HTML básica para o nosso formulário. Começaremos com um campo de entrada que será conectado a uma lista de dados.
Passo 1: Criar a estrutura básica do formulário
Comece com a estrutura básica do seu documento HTML. Certifique-se de que insere as meta tags e as ligações a ficheiros CSS ou JavaScript, conforme necessário.
Passo 2: Adicionar o campo de entrada
Com o campo de entrada do tipo texto, pode permitir a interação com as listas de sugestões. Defina o atributo de lista para o ID da sua lista de dados, que criaremos na próxima etapa.
Passo 3: Criar o elemento datalist
Agora, crie o elemento da lista de dados diretamente após o campo de entrada. Atribua um ID à lista de dados e adicione vários elementos de opção. Cada elemento de opção deve ter um atributo de valor que representa a sugestão.
Etapa 4: estilizar o campo de entrada e as listas de sugestões
Embora o estilo não seja absolutamente necessário, pode utilizar CSS para tornar o campo de entrada e a lista de sugestões mais apelativos para o utilizador. Certifique-se de que o elemento da lista de dados está visível quando o utilizador precisa dele.
Passo 5: Teste a funcionalidade da lista de sugestões
Agora deve testar o formulário. Quando o utilizador escreve no campo de entrada, aparecem as sugestões. Pode seleccioná-las ou fazer as suas próprias entradas. Verifique como as sugestões mudam com base na sua introdução.
Passo 6: Utilizar JavaScript para interações avançadas
Para personalizar ainda mais a funcionalidade, pode utilizar o JavaScript. Intercepte o evento onchange do campo de entrada para realizar acções adicionais ou para processar a seleção do utilizador.
Passo 7: Utilizar campos de entrada ocultos
Se pretender submeter o valor que o utilizador selecionou, pode utilizar um campo de entrada oculto. Desta forma, pode garantir que o valor correto é enviado através do formulário.
Passo 8: Conclusão e explicações adicionais
Se seguiu os passos acima, criou com sucesso uma lista de sugestões para o seu campo de entrada. Há muitas formas diferentes de personalizar esta funcionalidade para satisfazer as necessidades da sua aplicação.
Resumo
Neste tutorial, aprendeu a criar listas de sugestões para campos de entrada em HTML utilizando o elemento datalist. Analisámos os passos para criar o formulário, bem como as possíveis personalizações com CSS e JavaScript.
