Depois de aprender sobre o elemento de formulário e como tornar um formulário interativo, vamos ver como 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, reinserir o endereço várias vezes em todos os sites onde você quer fazer uma compra não é uma boa experiência de compra.
O preenchimento automático pode ajudar você. Você precisa inserir seu endereço uma vez. A partir de agora, o navegador 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 colocar o endereço antigo como uma opção para sempre. É possível editar os dados de endereço salvos pelo navegador para mantê-los atualizados.
Como o preenchimento automático funciona no navegador?
Um campo de endereço pode ser muito diferente em sites distintos. Como o 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 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 já inseridos. Os navegadores podem até mesmo oferecer o preenchimento automático de um formulário inteiro.
Ajudar navegadores com o preenchimento automático
Vamos ver o que você pode fazer para ajudar os navegadores a oferecer as opções corretas de preenchimento automático.
Use valores de atributo sensí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 para os usuários inserirem os endereços 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 Autocomplete
Há outros exemplos em que os navegadores ainda podem ter dificuldade para identificar o tipo de dados apenas nos atributos name, id e type.
Para ajudar, use o atributo autocomplete.
Você já inseriu um nome no navegador que está usando? O navegador provavelmente oferecerá a opção de preenchê-la novamente para esse campo na demonstração.
Você pode saber mais sobre como usar o preenchimento automático e o 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