Quando usar autocomplete
O atributo autocomplete identifica programaticamente o tipo de dado pessoal esperado e pode permitir que o navegador ofereça preenchimento assistido. Use os valores padronizados que correspondem ao campo; o token descreve o propósito, não substitui o rótulo visível nem o consentimento para tratar dados.
Exemplos prontos
Associe cada controle a um <label> visível. Em formulário de contato:
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" autocomplete="name">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email">
<label for="telefone">Telefone</label>
<input id="telefone" name="telefone" type="tel" autocomplete="tel">Para nome dividido em campos, use given-name e family-name. Em um endereço, exemplos de tokens são street-address, address-level2 (município/cidade), address-level1 (estado/região), postal-code e country-name. Confirme que cada token corresponde ao dado e à convenção local do formulário.
Se o formulário coleta endereço de cobrança e entrega em grupos separados, prefixos billing e shipping podem distinguir os grupos, por exemplo billing postal-code e shipping postal-code. Não acrescente prefixo quando o campo não pertence a esses contextos.
Como escolher e validar
- Liste somente os dados necessários à tarefa; remover um campo desnecessário é melhor do que pedir dado pessoal sem finalidade.
- Escolha o token HTML padronizado que descreve o usuário e o dado coletado. Não invente valores.
- Mantenha rótulo e instruções visíveis, associados ao controle; o
placeholdernão substitui o rótulo. - Verifique no HTML renderizado que o valor de
autocompleteé válido e corresponde ao rótulo. - Teste o fluxo com preenchimento assistido do navegador, teclado e tecnologia assistiva; confirme que endereço, telefone e nomes não são inseridos em campos incompatíveis.
O type="email" ou type="tel" informa o formato geral do controle; autocomplete="email" ou autocomplete="tel" especifica melhor sua finalidade. O usuário pode desativar o preenchimento no navegador, então o formulário deve funcionar sem ele.