Autofill

É cansativo ter que reinserir seu endereço pela décima vez. Os navegadores e você, como desenvolvedor, podem 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 adequadas.

Como o preenchimento automático funciona?

Na introdução ao preenchimento automático, você já aprendeu as noções básicas do 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 com os dados inseridos anteriormente. Isso é preenchimento automático.

Como os navegadores sabem quais dados precisam ser preenchidos automaticamente? Veja 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) com o valor do atributo name (nome). Alguns navegadores também usam o atributo id ao armazenar e preencher dados.

Digamos que, semanas depois, você preencha outro formulário em outro site. Esse 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 o nome já está armazenado.

O preenchimento automático é especialmente útil em formulários que você usa regularmente, como cadastro e login, pagamento, finalização de compra e formulários em que é necessário 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. Veja um exemplo de endereços.

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

Nem todo formulário de endereço tem 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.

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

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

Os navegadores têm gerenciadores de senhas integrados para gerar, salvar e preencher senhas para você. Saiba como você pode ajudar os navegadores a preencher e-mails automaticamente e gerenciar senhas.

Você pode usar autocomplete="email" em um campo de e-mail para que os usuários recebam 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 têm a opção de preencher as senhas usadas anteriormente. Você pode usar autocomplete="new-password" para garantir que os navegadores oferecem a opção de gerar uma nova senha.

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

É possível configurar a autenticação de dois fatores em vários 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 mais recente, você pode usar autocomplete="one-time-code" para fazer isso. No Chrome no Android, você pode usar a API WebOTP para fazer isso com o JavaScript.

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

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

Em muitos sites de e-commerce, é possível usar seu 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.

Existem 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 números de cartão de crédito e números de telefone, para garantir que os navegadores ofereçam o preenchimento automático. Para garantir que o preenchimento automático esteja disponível, use elementos de formulário padrão, por exemplo, um <select> para as datas do cartão de pagamento, em vez de elementos personalizados.

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 informações 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 o preenchimento automático. Encontrou um valor adequado para o campo do formulário? Adicionar.

O uso de valores adequados para o atributo autocomplete ajuda os navegadores a oferecer 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 pode 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, 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">

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

Outro caso de uso para autocomplete="off" é um campo de honeypot. Consulte o módulo anterior. Mesmo que o campo não esteja visível, os navegadores podem preencher 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.

Desative o preenchimento automático apenas se tiver certeza de que ele ajudará os usuários.

Teste seu conhecimento

Teste seus conhecimentos sobre o preenchimento automático

Recursos

• O atributo de preenchimento automático.
  • Práticas recomendadas do formulário de pagamento e endereço