Depois de aprender sobre o elemento de formulário e como tornar um formulário interativo, vamos conferir como você pode ajudar os usuários a evitar a reinserção de dados.
Aproveite ao máximo o preenchimento automático
Preencher formulários pode ser demorado. Por exemplo, digitar seu endereço repetidamente em todos os sites em que você quer comprar algo não é uma boa experiência de compra.
O preenchimento automático pode ajudar você. Você insere seu endereço uma vez. A partir de agora, seu navegador vai oferecer a opção de preencher o mesmo endereço em outros formulários automaticamente.
Você se mudou para outra cidade? Não se preocupe em ter o endereço antigo como uma opção para sempre. Você pode editar os dados de endereço salvos pelo navegador para manter as informações atualizadas.
Como o preenchimento automático funciona no navegador?
Um campo de endereço pode ter uma aparência muito diferente em sites diferentes. Como um navegador sabe que é um campo de endereço?
Os navegadores usam
heurísticas para identificar um campo de endereço.
Quais são os valores dos atributos name, type e id?
Há um atributo autocomplete presente no controle de formulário?
Com base nessas informações, os navegadores podem oferecer a opção de preencher automaticamente um campo com dados do mesmo tipo inseridos anteriormente. Os navegadores podem até oferecer o preenchimento automático de um formulário inteiro.
Ajudar navegadores com o preenchimento automático
Vamos conferir o que você pode fazer para ajudar os navegadores a oferecer as opções de preenchimento automático corretas.
Usar valores de atributo razoáveis
Como você aprendeu, os navegadores podem identificar o tipo de dados analisando os atributos de um controle de formulário.
<label for="email">Email</label>
<input type="email" name="email" id="email">
Você tem um campo em que os usuários precisam inserir o endereço de e-mail?
Use email como um valor para os atributos name, id e type.
Três dicas para o navegador de que este é um campo de e-mail.
O atributo de preenchimento automático
Há outros exemplos em que ainda pode ser difícil para os navegadores identificar o tipo de dados apenas pelos atributos name, id e type.
Você pode ajudar usando o atributo autocomplete.
Você já inseriu um nome no navegador que está usando? O navegador provavelmente vai oferecer a opção de preencher novamente esse campo na demonstração.
Você pode aprender mais sobre o uso de preenchimento automático em um módulo posterior.
Teste seu conhecimento
Teste seus conhecimentos sobre o preenchimento automático
Com base em quais atributos o preenchimento automático é oferecido?
name.typeautocomplete