Crie um formulário que facilite ao máximo a inserção de dados de endereço em computadores e dispositivos móveis. Verifique se o formulário aproveita ao máximo os recursos integrados do navegador para preenchimento automático, validação e restrições de entrada de dados.
Como fazer a implementação
Confira abaixo as diretrizes mais importantes para criar formulários de endereço bem-sucedidos.
Use um HTML significativo e válido
Aproveite ao máximo os elementos e atributos criados para criar formulários:
<form>,<input>,<label>e<button>type,autocompleteeinputmode
Eles ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à marcação.
Use o elemento <label> para rotular campos de formulário para entrada de dados
Para rotular um <input>, <select> ou <textarea>, use um <label>. Associe um rótulo a uma entrada atribuindo ao atributo for do rótulo o mesmo valor do id da entrada.
Aproveite ao máximo os atributos HTML
Facilite a inserção de dados pelos usuários usando o atributo <type> do elemento <input> adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação básica integrada pelo navegador.
Sempre use type="email" para endereços de e-mail e type="tel" para números de telefone.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Cada elemento <input>, <select> e <textarea> PRECISA ter um atributo autocomplete apropriado para melhorar a acessibilidade e ajudar os usuários a evitar a reinserção de dados.
Criar botões úteis
Use <button> para botões. Você também pode usar <input type="submit">, mas não use um div ou outro elemento aleatório como botão. Os elementos de botão oferecem comportamento acessível, funcionalidade integrada de envio de formulários e podem ser estilizados com facilidade.
Dê a cada botão de envio de formulário um valor que descreva o que ele faz. Para cada etapa da finalização da compra, use uma call-to-action descritiva que mostre o progresso e deixe claro qual é o próximo passo. Por exemplo, rotule o botão de envio no formulário de endereço de entrega como Ir para o pagamento em vez de Continuar ou Salvar.
Use uma única entrada de nome sempre que possível
Permita que os usuários insiram o nome usando uma única entrada, a menos que você tenha um bom motivo para armazenar separadamente nomes, sobrenomes, títulos ou outras partes do nome. Usar uma única entrada de nome torna os formulários menos complexos, permite recortar e colar e simplifica o preenchimento automático.
Permitir nomes internacionais. Para validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. A opção "Somente latim" exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Em vez disso, permita a correspondência de letras Unicode e garanta que seu back-end seja compatível com Unicode de forma segura como entrada e saída. O Unicode em expressões regulares é bem aceito pelos navegadores mais recentes.
Permitir vários formatos de endereço
Ao criar um formulário de endereço, esteja ciente da variedade de formatos de endereço, mesmo em um único país. Não faça suposições sobre endereços "normais".
Se possível, use um único elemento <textarea> para o endereço.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Essa é a opção mais flexível para uma variedade de formatos de endereço locais e internacionais.
Se o modelo de dados precisar de linhas de endereço separadas, use um <input> por linha com os tokens autocomplete address-line1, address-line2 (e, se necessário, address-line3) para que o preenchimento automático ainda funcione. Não divida o endereço em entradas que não tenham esses tokens e torne obrigatória apenas a primeira linha.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Evitar que os usuários percam campos de dados acidentalmente
Adicione o atributo required aos campos obrigatórios.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Estratégias de fallback
O preenchimento automático é um aprimoramento progressivo. Em navegadores que não oferecem suporte ao preenchimento automático, os usuários precisam inserir manualmente os detalhes do endereço. As restrições semânticas de HTML (como type, inputmode e required) ainda vão funcionar adequadamente como validação de formulário padrão.