Formulários de endereço

Preencher um endereço pode ser demorado e frustrante. O que é uma linha de endereço 2? Talvez você não tenha um sobrenome. Então, o que você deve inserir no campo Sobrenome? Evite essas confusões e ajude os usuários a preencher formulários de endereço.

Verifique se o formulário de endereço é fácil de usar

Muitos formulários usam um campo para o nome e outro para o sobrenome. Entretanto, algumas pessoas não têm sobrenome, ou seus nomes não têm duas partes, então como elas devem preencher o campo de sobrenome? Use um único <input> para o campo de nome. Saiba como gerenciar diferentes formatos de nome.

Use também um único <input> para o endereço. Nem todos têm número.

Tenha cuidado com descrições de controles de formulários. Por exemplo, os usuários nos EUA dizem ZIP, no caso do código postal do Reino Unido. Use <label for="zip">ZIP or postal code (optional)</label> para garantir que os usuários saibam quais dados inserir. Torne o campo de código postal opcional. Nem todos os endereços têm um código postal.

Ajudar os usuários a inserir o endereço

O atributo autocomplete pode ajudar os usuários a inserir o endereço novamente:

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

Você pode definir diversos valores separados por um espaço para autocomplete. Digamos que você tenha um formulário com endereço de entrega e outro para endereço de faturamento. Para informar ao navegador qual CEP é o endereço de faturamento, você pode usar autocomplete="billing postal-code". Para o endereço de entrega, use shipping como o primeiro valor.

Mude o rótulo da tecla Enter nos teclados na tela com o atributo enterkeyhint. Use enterkeyhint="done" para o último controle de formulário e enterkeyhint="next" para os outros controles de formulário.

Recursos