Landing pages · GUIA PRÁTICO

Como permitir preenchimento automático de endereço

Ajude o navegador a completar endereço sem misturar cobrança e entrega.

O atributo HTML autocomplete informa ao navegador qual dado é esperado em cada campo. Para funcionar bem, use um rótulo visível, um controle associado ao rótulo e um token que corresponda ao valor solicitado. Não use apenas texto de exemplo dentro do campo como instrução.

Separe entrega e cobrança

Quando o formulário coleta os dois endereços, mantenha grupos com títulos explícitos e tokens de contexto diferentes. Exemplo mínimo:

<fieldset>
  <legend>Endereço de entrega</legend>
  <label for="entrega-rua">Endereço</label>
  <input id="entrega-rua" name="shipping-address-line1"
         autocomplete="section-entrega shipping address-line1">

  <label for="entrega-complemento">Complemento</label>
  <input id="entrega-complemento" name="shipping-address-line2"
         autocomplete="section-entrega shipping address-line2">

  <label for="entrega-cep">CEP</label>
  <input id="entrega-cep" name="shipping-postal-code"
         autocomplete="section-entrega shipping postal-code">
</fieldset>

<fieldset>
  <legend>Endereço de cobrança</legend>
  <label for="cobranca-cep">CEP de cobrança</label>
  <input id="cobranca-cep" name="billing-postal-code"
         autocomplete="section-cobranca billing postal-code">
</fieldset>

Use address-level2 para município/cidade, address-level1 para estado/província, country-name para país e address-line1/address-line2 para linhas do endereço. O token section-* diferencia grupos repetidos; shipping e billing indicam a finalidade. Siga a ordem definida pela referência HTML/MDN e não invente tokens específicos do Brasil.

Implemente e teste

  1. Associe cada label ao id correto; use nomes diferentes para entrega e cobrança.
  2. Se houver opção “usar o endereço de entrega também para cobrança”, sincronize os grupos sem apagar o que a pessoa já digitou ao alternar a opção.
  3. Ao aplicar máscara de CEP, permita edição e não impeça colar ou preenchimento do navegador.
  4. Teste no Chrome, Safari e Firefox disponíveis, com um endereço salvo, outro endereço, correção manual e teclado. Confirme que o CEP e a cidade não trocaram de grupo e que erros apontam o campo correspondente.
  5. Valide os dados novamente no servidor; autocomplete melhora a entrada, mas não prova que o endereço existe nem substitui confirmação antes do pagamento.

Autopreenchimento pode variar conforme navegador, perfil e sistema operacional. Use a documentação de tokens autocomplete da MDN e a orientação W3C sobre finalidade dos campos. Para outras tarefas, consulte controles e formulários.

Continue por aqui