Autofill

Ter que inserir seu endereço pela décima vez é cansativo. Os navegadores e você, como desenvolvedor, podem ajudar os usuários a inserir dados mais rapidamente e evitar a reinserção. 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 adequadas de preenchimento automático.

Como o preenchimento automático funciona?

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

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

Como os navegadores sabem quais dados preencher automaticamente? Confira um exemplo de campo de formulário para descobrir.

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

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

Digamos que, semanas depois, você preencha 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 o preenchimento automático, porque um valor para o nome já está armazenado.

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

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

Seu navegador já tem um endereço salvo para você? Ótimo! Depois que você interagir com o primeiro campo do formulário de endereço, o navegador vai mostrar uma lista de endereços salvos. Você pode escolher um, e o navegador preenche todos os campos relacionados ao endereço. O preenchimento automático torna o preenchimento de formulários mais rápido e fácil.

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. Há valores para country, postal-code e muitos outros.

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

Muitas pessoas não são boas em lembrar senhas. A senha mais comum é "123456", seguida por outras combinações fáceis de lembrar. Como usar senhas seguras e exclusivas sem precisar se lembrar de todas elas?

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 o gerenciamento de senhas.

Você pode usar autocomplete="email" para um campo de e-mail, assim os usuários recebem a opção de 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 preencher senhas usadas anteriormente. Use autocomplete="new-password" para garantir que os navegadores ofereçam a opção de gerar uma nova senha.

No formulário de login, você pode usar autocomplete="current-password" para informar aos navegadores que ofereçam a opção de preencher senhas salvas anteriormente para este site.

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

Não seria ótimo se o código recebido na mensagem SMS fosse sugerido pelo teclado na tela e você pudesse selecioná-lo diretamente para preencher o valor? No Safari 14 ou versões mais recentes, use autocomplete="one-time-code" para fazer isso. No Chrome para Android, use a API WebOTP para fazer isso com JavaScript.

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

Atenção: o SMS não é o método de autenticação mais seguro por si só, porque os números de telefone podem ser reciclados e sequestrados. Considere usar outros métodos de autenticação de dois fatores ou a autenticação multifator.

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

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

Você pode usar o atributo autocomplete novamente para garantir que os navegadores ofereçam as opções de preenchimento automático corretas.

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

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

Saiba mais sobre como ajudar os usuários a evitar a reinserção de dados de pagamento.

Verificar se o preenchimento automático funciona em todos os campos

Além de endereços, informações da conta e do 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 é possível usar algum dos valores disponíveis para preenchimento automático. Encontrou um valor adequado para o campo do formulário? Adicione.

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

Ajude 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 ele facilita o preenchimento de formulários para os usuários. No entanto, às vezes, você não quer 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 como um campo de código único. O valor é diferente a cada vez, e o navegador não deve salvar valores nem oferecer uma opção de preenchimento automático. É possível usar autocomplete="off" nesses campos para evitar o preenchimento automático.

Outro caso de uso para autocomplete="off" é um campo honeypot (consulte o módulo anterior). Mesmo que o campo não esteja visível, os navegadores podem preenchê-lo automaticamente com o restante dos campos. Desativar o preenchimento automático garante que um usuário real não seja identificado como um bot, já que o campo é preenchido automaticamente.

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

Teste seu conhecimento

Teste seus conhecimentos sobre o preenchimento automático

Recursos

• O atributo autocomplete.
  • Práticas recomendadas para formulários de pagamento e endereço