Atributo autocomplete do HTML

O que é o atributo autocomplete?

O atributo autocomplete diz ao navegador para que serve um campo de formulário, para que ele possa preenchê-lo com o que já sabe sobre quem está usando. Escrever autocomplete="given-name" num input é a diferença entre o navegador oferecer o primeiro nome de alguém e não oferecer nada.

O vocabulário é maior e mais estruturado do que quase todo mundo usa. A especificação HTML define 54 nomes de campo, dos óbvios como email e postal-code até cc-exp-month, honorific-suffix, transaction-currency e one-time-code. Ao lado deles há 10 tokens de dica que qualificam um nome de campo em vez de substituí-lo: shipping, billing, home, work, mobile, fax, pager, um token section de agrupamento e os valores soltos on e off. E há exatamente um tipo de credencial, webauthn, que vem depois do nome do campo e é o que faz o navegador oferecer uma passkey.

A ordem importa e é fixa: um token section opcional, depois shipping ou billing, depois uma dica de contato, depois o nome do campo e por fim o tipo de credencial. Esta página analisa o que você colar e diz qual espaço cada token ocupou.

Como usar

1. Cole o valor que você escreveu. Só o valor do atributo, não a tag inteira. Os quatro botões de exemplo cobrem um endereço postal, um login com passkey, um valor com os tokens na ordem errada e um erro de digitação.
2. Olhe o grupo de controle. Esta é a parte útil. A especificação atribui cada nome de campo a um tipo de controle, e a ferramenta diz qual é e o que isso significa na prática.
3. Confira os problemas, se houver. Um token que não existe, uma dica fora de lugar, um nome de campo faltando ou um token section sem nada depois. Tudo isso é silencioso no navegador: nada avisa.

O grupo de controle é o que todo mundo deixa de fora

Procure os valores de autocomplete em qualquer lugar e você terá uma lista de tokens com uma frase de significado cada. O que isso omite é normativo e imediatamente útil: a especificação também atribui cada nome de campo a um grupo de controle, e o grupo diz em que tipo de input o token vai.

O primeiro que vale conhecer é street-address, que está no grupo multiline. Ele é para um textarea, porque um endereço postal não cabe em uma linha. Se você quer inputs de uma linha só, o seu caso é address-line1, address-line2 e address-line3, que estão no grupo de texto. Colocar street-address num input de uma linha é o erro mais comum que esta página consegue mostrar, e nenhum navegador vai comentar.

Os tokens com cara de data se dividem do mesmo jeito. bday está no grupo date e vai num input do tipo date, porque é um ano, um mês e um dia inteiros. bday-day e bday-year estão no grupo numérico: são números avulsos e vão em inputs numéricos. cc-exp está no grupo month, que é um ano e um mês juntos, enquanto cc-exp-month é numérico. Quatro tokens que parecem datas e três tipos de controle diferentes.

Mais alguns que surpreendem: one-time-code está no grupo password, não no numérico, e é o que permite ao navegador oferecer um código que ele acabou de ver chegar. photo e impp estão os dois no grupo url, porque seus valores são endereços e não nomes. E cc-number está no grupo de texto e não no numérico, já que um número de cartão é uma sequência de dígitos e não uma quantidade.

O que autocomplete=off promete de verdade

Menos do que a fama sugere, e vale ser exato. A especificação diz que, quando o nome de campo de um controle é off, o agente de usuário deveria não lembrar os dados do controle nem oferecer valores anteriores. É um deveria, não um deve. Um navegador que lembra mesmo assim continua conforme.

Igualmente importante é dizer o que a especificação não contém, porque é aqui que boa parte do que se escreve sobre o assunto exagera. Não há nenhuma cláusula permitindo que navegadores ignorem off em campos de senha. A seção não menciona gerenciadores de senha e não menciona phishing. O deveria é tudo o que há. Os navegadores se comportam de maneiras que as pessoas descrevem como ignorar off, e esse comportamento é real, mas não é algo que o padrão autorize no texto, então esta página não afirma que autoriza.

A leitura prática é simples: off é um pedido, não um controle. Se um valor não pode ser guardado, o atributo não é o mecanismo que garante isso.

Limites assumidos

Isto verifica um valor, não uma página. Não dá para ver em que elemento o atributo está, então ele pode dizer que street-address vai num textarea, mas não que o seu está num input. Essa é justamente a verificação que pegaria mais erros reais, e ela precisa da sua marcação, não do seu valor.

Também não dá para dizer se o navegador vai realmente preencher o campo. O autopreenchimento depende do que o navegador tem guardado, de heurísticas que variam entre navegadores e do formulário ao redor: um atributo correto torna o comportamento certo possível, não garantido.

O vocabulário é um retrato do momento. A especificação vai acrescentando: webauthn é recente, e one-time-code é mais novo que boa parte do que se escreveu sobre este atributo. A lista aqui é gerada a partir do padrão em vez de digitada, o que facilita regerá-la, mas continua sendo o padrão como ele está hoje.

Uma nota sobre como essa lista foi construída, porque isso afetou o que esta página pode afirmar. A tabela da própria especificação mescla células nas duas direções, com uma classe cujo nome remete a um recuo não retangular, então ela não pode ser lida por posição, e uma leitura posicional produz uma tabela que parece certa e está errada. Os dados vêm das âncoras de definição da especificação, com a extração conferida contra tokens cuja resposta era conhecida de antemão.

Por que é grátis?

A lista é estática e a análise roda no seu navegador. Não há servidor envolvido, então não há nada para cobrar nem conta para criar.

Nada é enviado e nada é guardado. Recarregue a página e ela terá esquecido o que você digitou.