Depois de conhecer elemento de formulário e como criar um formulário interativo, vamos conferir 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 seu endereço várias vezes 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ê aqui. Você digita seu endereço apenas uma vez. A partir de agora, seu navegador vai oferecer a opção de preencher automaticamente o mesmo endereço para outros formulários.
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 que seu navegador salvou para mantê-lo atualizado.
Como o preenchimento automático funciona no navegador?
Um campo de endereço pode ser muito diferente em sites diferentes. Como um navegador sabe que esse é um campo de endereço?
Os navegadores usam
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 da Web podem oferecer a opção de preencher automaticamente um campo com dados do mesmo tipo inseridos anteriormente. Os navegadores podem até mesmo oferecer o preenchimento automático de um formulário inteiro.
Ajudar navegadores com o preenchimento automático
Vamos descobrir o que você pode fazer para ajudar os navegadores a oferecer as opções corretas de preenchimento automático.
Usar valores de atributos sensíveis
Como você aprendeu, os navegadores podem identificar o tipo de dados observando 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 devem 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 Autocomplete
Há outros exemplos em que ainda pode ser difícil para os navegadores identificar o tipo de dado apenas nos atributos name, id e type.
É possível ajudar aqui usando o atributo autocomplete.
Você já inseriu um nome no navegador que está usando? O navegador provavelmente oferecerá a opção de preenchê-lo novamente para este campo na demonstração.
Você pode aprender mais sobre como usar preenchimento automático e 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