Formulários de endereço

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

Criar um formulário fácil de usar

Muitos formulários usam um campo para o nome e outro para o sobrenome. No entanto, algumas pessoas não têm sobrenome ou seus nomes não têm duas partes. Como elas devem preencher o campo "Sobrenome"? Use um único <input> para o campo "name". Saiba mais sobre como lidar com diferentes formatos de nome.

De acordo com pesquisas, o endereço, linha 2 pode confundir os usuários. Use um <textarea> para todo o endereço ou oculte o campo Linha de endereço 2 atrás de um <button> de revelação.

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

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"

É possível definir vários valores separados por um espaço para autocomplete. Suponha que você tenha um formulário com um endereço de entrega e outro com um endereço de faturamento. Para informar ao navegador qual CEP corresponde ao endereço de faturamento, use 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.

Recursos