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.