Autofill

Ter que digitar novamente o endereço pela décima vez pode ser cansativo. Navegadores, e você, como desenvolvedor, pode ajudar os usuários a inserir dados mais rapidamente e evitar a reinserção de dados. Este módulo ensina como o preenchimento automático funciona e como autocomplete e outros atributos de elementos podem garantir que os navegadores ofereçam opções de preenchimento automático adequadas.

Como funciona o preenchimento automático?

Na introdução ao preenchimento automático, você já aprendeu o básico sobre preenchimento automático. Mas por que os navegadores oferecem o preenchimento automático?

Preencher formulários não é uma atividade interessante, mas ainda é algo que você faz com frequência. Com o tempo, você preenche muitos formulários e muitas vezes preenche os mesmos dados. Uma maneira de ajudar os usuários a preencher formulários mais rapidamente é oferecendo a opção de preencher automaticamente os campos do formulário com os dados inseridos anteriormente. Isso é preenchimento automático.

Como os navegadores sabem quais dados precisam ser preenchidos automaticamente? Veja um exemplo de formulário para descobrir.

<label for="name">Name</label>
<input name="name" id="name">

Se você enviar este campo de formulário, os navegadores vão armazenar o valor (os dados inseridos) com o valor do atributo name (nome). Alguns navegadores também analisam o atributo id ao armazenar e preencher dados.

Digamos, semanas depois, que você preencheu outro formulário em outro site. Este site também contém um campo de formulário com name="name". Seu navegador agora pode oferecer preenchimento automático, porque um valor para "name" já está armazenado.

O preenchimento automático é especialmente útil em formulários que você usa regularmente, como inscrições e login, pagamento, checkout e formulários em que você precisa inserir seu nome ou endereço IP.

Você pode ajudar os navegadores a oferecer as melhores opções de preenchimento automático usando valores para o atributo autocomplete. Há muitos valores possíveis para autocomplete. Aqui está um exemplo de endereços.

Seu navegador já tem um endereço salvo para você? Ótimo! Depois de interagir com o primeiro campo do formulário de endereço, o navegador mostra uma lista de endereços salvos. Você pode escolher uma, e o navegador vai preencher todos os campos relacionadas ao endereço. O preenchimento automático agiliza e facilita o preenchimento de formulários.

Nem todos os formulários de endereço têm os mesmos campos e a ordem deles também varia. Usar os valores corretos para autocomplete garante que o navegador preencha os valores corretos para um formulário. Existem valores para country, postal-code, e muitos mais.

Garanta que os usuários possam fazer login rapidamente e usar senhas seguras

Muitas pessoas não são boas em lembrar senhas. As ferramentas mais comuns senha é "123456", seguida de outras combinações fáceis de lembrar. Como você pode usar senhas seguras e exclusivas sem lembrar de todas?

Os navegadores têm gerenciadores de senhas integrados para gerar, salvar e preencher senhas para você. Saiba como ajudar os navegadores com o preenchimento automático de e-mails e gerenciar senhas.

É possível usar autocomplete="email" em um campo de e-mail para que os usuários recebam o preenchimento automático. para um endereço de e-mail.

Como este é um formulário de inscrição, os usuários não devem ter a opção de preenchê-lo anteriormente usadas. Use autocomplete="new-password" para garantir que os navegadores oferecer a opção de gerar uma nova senha.

No formulário de login, use autocomplete="current-password" para informar oferecem a opção de preencher senhas salvas anteriormente site.

É possível configurar a autenticação de dois fatores em vários sites. Além da seção senha, um código único será enviado por SMS ou por um app de autenticação de dois fatores.

Não seria ótimo se o código que você recebeu na mensagem SMS fosse sugerido pelo teclado na tela, e você pode selecioná-lo diretamente para preencher o valor? No Safari 14 ou mais recente, é possível usar autocomplete="one-time-code" para isso. No Chrome no Android, você pode usar o WebOTP API para alcançar isso com JavaScript.

Saiba mais sobre como verificar números de telefone na Web com o formulário OTP por SMS práticas recomendadas.

Ajudar os usuários a preencher as informações do cartão de crédito

Em muitos sites de e-commerce, você pode usar seu cartão de crédito para comprar produtos. Os sites podem usar plataformas de pagamento de terceiros que fornecem seus próprios formulários, mas se você precisa criar seus próprios formulários de pagamento, garantir que as pessoas possam preencher facilmente informações de pagamento.

Use o atributo autocomplete novamente para garantir que os navegadores ofereçam a opções corretas de preenchimento automático.

Há valores para o número do cartão de crédito cc-number, validade do cartão de crédito data cc-exp e todas as outras informações necessário para um pagamento com cartão de crédito.

Use uma única entrada para números como números de cartão de crédito e telefones para garantir que os navegadores ofereçam preenchimento automático. Use elementos de formulário padrão, para por exemplo, um <select> para as datas do cartão de pagamento, em vez de elementos personalizados, para verificar se o preenchimento automático está disponível.

Saiba mais sobre como ajudar os usuários a evitar novas entradas de pagamento dados.

Garantir que o preenchimento automático funcione para todos os campos

Além de endereços, informações de conta e informações de cartão de crédito, há muitos outros campos em que os navegadores podem ajudar os usuários com o preenchimento automático.

Ao adicionar um campo de telefone ao formulário, verifique se você pode usar qualquer um dos disponível valores para o preenchimento automático. Encontrou um valor adequado para o campo do formulário? Adicione-o.

O uso de valores adequados para o atributo autocomplete ajuda os navegadores a oferecer o a melhor opção de preenchimento automático e ajuda os usuários a preencher formulários mais rapidamente.

Ajudar os navegadores a entender que um campo não deve ser preenchido automaticamente

Você aprendeu como o preenchimento automático funciona, como ajudar os navegadores com esse recurso e por que o preenchimento automático facilita o preenchimento de formulários para os usuários. Às vezes, porém, se não quiserem que os navegadores ofereçam o preenchimento automático.

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code">

O preenchimento automático não é útil ao inserir valores únicos e exclusivos como um campo de código único. O valor sempre é diferente, e a navegador não pode salvar valores nem oferecer uma opção de preenchimento automático. Você pode usar autocomplete="off" nesses campos para evitar o preenchimento automático.

Outro caso de uso de autocomplete="off" é um campo de honeypot (consulte as módulo). Mesmo que o campo não seja estiver visível, os navegadores poderão preenchê-la automaticamente com o restante dos campos. Ativando o preenchimento automático desativado garante que um usuário real não seja identificado como um bot, devido ao campo sendo concluída automaticamente.

Só desative o preenchimento automático se tiver certeza de que ele ajudará os usuários.

Teste seu conhecimento

Teste seus conhecimentos sobre o preenchimento automático

Recursos

• A função preenchimento automático Atributo.
  • Melhor forma de pagamento e endereço práticas