Ajudar os usuários a evitar a reinserção de dados em formulários

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.

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?

O atributo type
O atributo name.
O atributo autocomplete
Todas as alternativas acima

Recursos