Atributo HTML Autocomplete
Aprenda o atributo HTML autocomplete: valores on e off, tokens de preenchimento automático como email e new-password, com notas de segurança e acessibilidade.
O atributo autocomplete controla se o navegador pode preencher automaticamente um campo de formulário para o utilizador. Quando está ativado e o utilizador começa a digitar, o navegador sugere valores que guardou de envios anteriores (nomes, e-mails, moradas, entre outros) para que o campo possa ser preenchido com um toque ou clique.
Esta página aborda os dois valores básicos (on e off), os tokens de preenchimento automático com nomes específicos que informam o navegador exatamente que tipo de dados um campo contém, quando deve desativar o autocomplete, e as implicações em termos de segurança e acessibilidade.
Nota: O atributo autocomplete funciona com os tipos de <input> como text, search, tel, url, password, email, range e color.
Sintaxe
Sintaxe do atributo HTML Autocomplete
<input autocomplete="on|off">Também pode usar um token com nome em vez de on/off para descrever a finalidade exata do campo:
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| Aplica-se a | Elementos <form> e <input>. |
|---|
Exemplo do atributo HTML autocomplete:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Exemplo da tag HTML <form> com o atributo autocomplete ativado:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" autocomplete="on">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" />
<input type="submit" value="Send" />
</form>
</body>
</html>Utilização de tokens de preenchimento automático com nomes
Em vez de apenas on ou off, pode atribuir a cada campo um token que descreve que tipo de valor ele contém. O navegador oferece então os dados guardados corretos (o e-mail do utilizador, o endereço de entrega, uma nova palavra-passe que pode gerar, entre outros). Os tokens com nomes tornam o preenchimento automático muito mais preciso do que um genérico on.
O exemplo abaixo combina um formulário de morada com uma secção de início de sessão. Note o autocomplete="email" para o campo de e-mail e autocomplete="new-password" para a palavra-passe de registo, o que indica ao navegador para sugerir uma palavra-passe recém-gerada em vez de uma existente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Tokens de preenchimento automático mais comuns
O padrão HTML define mais de 50 tokens de preenchimento automático. A tabela abaixo lista os que utilizará com mais frequência. Para a lista completa e oficial, consulte a especificação de preenchimento automático do WHATWG.
| Token | Finalidade do campo |
|---|---|
name | Nome completo |
given-name | Primeiro nome |
family-name | Apelido (nome de família) |
nickname | Apelido ou nome de utilizador |
username | Nome de início de sessão da conta |
email | Endereço de e-mail |
tel | Número de telefone completo |
street-address | Morada completa (multi-linha) |
address-line1 | Primeira linha da morada |
address-line2 | Segunda linha (apartamento, suite) |
address-level2 | Cidade ou localidade |
address-level1 | Estado, província ou região |
postal-code | Código postal ou ZIP |
country | Código do país (ex.: US) |
country-name | Nome do país |
cc-name | Nome impresso no cartão de pagamento |
cc-number | Número do cartão de pagamento |
cc-exp | Data de validade do cartão |
cc-csc | Código de segurança do cartão (CVC/CVV) |
current-password | Palavra-passe existente (para início de sessão) |
new-password | Nova palavra-passe (para registo ou alteração) |
one-time-code | Código de verificação de uso único (OTP) |
bday | Data de aniversário completa |
Quando (e porquê) desativar o autocomplete
Na maioria das vezes deve manter o autocomplete ativado, pois poupa digitação e reduz erros. Existem algumas razões legítimas para o desativar:
- Códigos de uso único e dados sensíveis. Campos para palavras-passe de uso único, respostas CAPTCHA ou outros valores que nunca devem ser guardados são boas candidaturas. Para um campo OTP, prefira
autocomplete="one-time-code"em vez deoff, para que os dispositivos móveis possam ainda sugerir o código de uma SMS sem o armazenar permanentemente. - Interface de preenchimento personalizada. Se a sua aplicação disponibiliza o seu próprio menu de sugestões (por exemplo, uma pesquisa de cidade ou produto com
<datalist>ou um widget JavaScript), o preenchimento automático nativo do navegador pode interferir, pelo que pode desativá-lo. - Dispositivos partilhados ou quiosques, privacidade. Em terminais públicos pode não querer que o navegador retenha ou pré-preencha dados pessoais para o próximo utilizador.
Atenção: autocomplete="off" é apenas uma sugestão. Para campos de palavra-passe, o Chrome e o Safari ignoram-no frequentemente para que os seus gestores de palavras-passe integrados continuem a funcionar, o que é considerado uma funcionalidade de segurança. Para impedir que o navegador sugira uma palavra-passe guardada existente, use autocomplete="new-password" no campo relevante em vez de off.
Nota de segurança: desativar o autocomplete não torna um formulário mais seguro. Os dados guardados continuam no gestor de palavras-passe do navegador, e obrigar os utilizadores a digitar palavras-passe longas manualmente incentiva palavras-passe fracas e reutilizadas. O padrão mais seguro é rotular os campos com os tokens corretos (current-password, new-password, one-time-code) para que os gestores de palavras-passe e o navegador tratem os dados de forma adequada.
Acessibilidade e experiência do utilizador
Os tokens de preenchimento automático com nomes são uma funcionalidade de acessibilidade, não apenas uma conveniência:
- Satisfazem o Critério de Sucesso 1.3.5 "Identificar a Finalidade da Entrada" das WCAG 2.1, que exige que a finalidade de campos de formulário comuns seja identificável programaticamente.
- Permitem que os gestores de palavras-passe preencham credenciais de forma fiável e que os navegadores móveis mostrem o teclado no ecrã correto.
- Desativar o autocomplete pode ser uma barreira para utilizadores com deficiências cognitivas, limitações motoras ou dificuldades de memória, que dependem de valores guardados para preencher formulários. Desative-o apenas quando houver uma razão real para isso.
Relacionado: autofocus move o cursor para um campo ao carregar a página, e o capítulo sobre <input> aborda os tipos de campo com os quais estes tokens se combinam.