Codelab de práticas recomendadas para o formulário de endereço

Sam Dutton

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Como você pode projetar um formulário que funcione bem para vários nomes e formatos de endereço? Falhas menores no formulário irritam os usuários e podem fazer com que eles saiam do seu site ou desistam de concluir uma compra ou inscrição.

Este codelab mostra como criar um formulário acessível e fácil de usar que funciona bem para a maioria dos usuários.

Etapa 1: aproveitar ao máximo os elementos e atributos HTML

Você vai começar esta parte do codelab com um formulário vazio, apenas um título e um botão. Em seguida, você vai começar a adicionar entradas. (CSS e um pouco de JavaScript já estão incluídos.)

• Clique em Remix to Edit para tornar o projeto editável.

• Adicione um campo de nome ao elemento <form> com o seguinte código:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Isso pode parecer complicado e repetitivo para apenas um campo de nome, mas já faz muito.

Você associou o label ao input ao fazer a correspondência do atributo for do label com o name ou id do input. Um toque ou clique em um rótulo move o foco para a entrada, criando um alvo muito maior do que a entrada por si só, o que é bom para dedos, polegares e cliques do mouse. Os leitores de tela anunciam o texto do marcador quando o marcador ou a entrada dele recebe o foco.

E o name="name"? Esse é o nome (que é "name") associado aos dados dessa entrada, que é enviado ao servidor quando o formulário é enviado. A inclusão de um atributo name também significa que os dados desse elemento podem ser acessados pela API FormData.

Etapa 2: adicionar atributos para ajudar os usuários a inserir dados

O que acontece quando você toca ou clica no campo Nome no Chrome? Você vai ver sugestões de preenchimento automático que o navegador armazenou e as estimativas são adequadas para essa entrada, considerando os valores name e id.

Agora adicione autocomplete="name" ao código de entrada para que ele fique assim:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Recarregue a página no Chrome e toque ou clique no campo Nome. Quais diferenças você nota?

Observação : você já se perguntou como excluir sugestões de preenchimento automático no Chrome? * Windows: Shift + delete * Mac: Shift + fn + delete

Você vai notar uma mudança sutil: com autocomplete="name", as sugestões agora são valores específicos que foram usados anteriormente em entradas de formulário que também tinham autocomplete="name". O navegador não está apenas adivinhando o que pode ser apropriado: você tem controle. Você também vai encontrar a opção Gerenciar… para conferir e editar os nomes e endereços armazenados pelo navegador.

Interface para preenchimento automático com valores estimados, em vez de preenchimento automático.

Observação : se um valor de preenchimento automático adequado estiver disponível para um input, select ou textarea, use-o.

Agora adicione atributos de validação de restrição maxlength, pattern e required para que o código de entrada fique assim:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

• maxlength="100" significa que o navegador não permite entradas com mais de 100 caracteres.

• pattern="[\p{L} \-\.]+" usa uma expressão regular que permite caracteres de letra Unicode, hifens e pontos (pontos finais). Isso significa que nomes como Françoise ou Jörg não são classificados como "inválidos". Isso não acontece se você usar o valor \w, que [permite apenas caracteres do alfabeto latino.

• required significa: obrigatório. O navegador não permite que o formulário seja enviado sem dados para esse campo e vai avisar e destacar a entrada se você tentar enviar. Nenhum código extra é necessário.

Atenção : este codelab não aborda (😜) localização ou internacionalização. Dependendo de onde seus usuários estão localizados, você precisa considerar os formatos de endereço e os diferentes nomes usados para os componentes do endereço, mesmo no mesmo idioma: CEP, código postal, Eircode ou PIN? Talvez seja necessário personalizar o site para várias localidades, mas o formulário de endereço neste codelab foi projetado para ser flexível e funcionar "bem o suficiente" para uma variedade de endereços.

Para testar como o formulário funciona com e sem esses atributos, tente inserir dados:

• Tente inserir valores que não se encaixem no atributo pattern.
• Tente enviar o formulário com uma entrada vazia. Você vai notar um aviso de funcionalidade integrada do navegador sobre o campo obrigatório vazio e a configuração de foco nele.

Etapa 3: adicionar um campo de endereço flexível ao formulário

Para adicionar um campo de endereço, adicione o seguinte código ao formulário:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

Um textarea é a maneira mais flexível de os usuários inserirem o endereço e é ótimo para cortar e colar.

Evite dividir o formulário de endereço em componentes, como nome e número da rua, a menos que seja realmente necessário. Não force os usuários a tentar encaixar o endereço em campos que não fazem sentido.

Observação : considere como os dados de endereço do seu formulário estão sendo usados. Para que serve? Entenda os requisitos de dados e quem os define.

Agora adicione campos para CEP ou código postal e País ou região. Para simplificar, apenas os cinco primeiros países estão incluídos aqui. Uma lista completa está incluída no formulário de endereço preenchido.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

O código postal é opcional porque muitos países não usam códigos postais. O Global Sourcebook (em inglês) fornece informações sobre formatos de endereços de 194 países diferentes, incluindo exemplos de endereços. O rótulo País ou região é usado em vez de País porque algumas opções da lista completa (como o Reino Unido) não são países únicos (apesar do valor autocomplete).

Etapa 4: permitir que os clientes insiram endereços de entrega e faturamento com facilidade

Você criou um formulário de endereço altamente funcional, mas e se o site exigir mais de um endereço, por exemplo, para entrega e faturamento? Atualize o formulário para permitir que os clientes insiram endereços de entrega e de faturamento. Como você pode tornar a entrada de dados o mais rápida e fácil possível, principalmente se os dois endereços forem iguais? O artigo que acompanha este codelab explica técnicas para processar vários endereços. Seja qual for a situação, use os valores autocomplete corretos.

Etapa 5: adicionar um campo de número de telefone

Para adicionar uma entrada de número de telefone, adicione o seguinte código ao formulário:

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

Para números de telefone, use uma única entrada: não divida o número em partes. Isso facilita a entrada de dados ou a cópia e colagem, simplifica a validação e permite que os navegadores façam o preenchimento automático.

Há dois atributos que podem melhorar a experiência do usuário ao inserir um número de telefone:

• type="tel" garante que os usuários de dispositivos móveis tenham o teclado certo.
• enterkeyhint="done" define o rótulo da tecla Enter do teclado para dispositivos móveis para mostrar que este é o último campo e que o formulário pode ser enviado (o padrão é next).

Use o atributo "enterkeyhint" para definir o rótulo do botão Enter: 'next' e 'done'.

O uso de type="number" adiciona uma seta para cima/para baixo para incrementar números, o que não faz sentido para dados como números de telefone, cartão de pagamento ou conta. Em vez disso, use type="tel" para números de telefone. Para outros números, use type="text" (ou deixe o atributo de fora, já que text é o padrão) e adicione inputmode="numeric" para ter um teclado numérico em dispositivos móveis.

Observação : você identificou algum problema ao usar uma única entrada para o número de telefone? Você armazena as partes do número de telefone (código de país e de área) separadamente? Se sim, por quê?

O formulário de endereço completo vai ficar assim:

• Teste o formulário em diferentes dispositivos. Para quais dispositivos e navegadores você está direcionando? Como o formulário pode ser melhorado?

Há várias maneiras de testar seu formulário em diferentes dispositivos:

• Use o Device Mode do Chrome DevTools para simular dispositivos móveis.
• Enviar o URL do computador para o smartphone.
• Use um serviço como o BrowserStack para testar em uma variedade de dispositivos e navegadores.

Observação : antes de começar a criar formulários, entenda quais dados são necessários e se eles são estritamente necessários. Não peça dados que você não precisa. A maneira mais simples de reduzir a complexidade do formulário e melhorar a privacidade é remover campos desnecessários. Armazenar menos dados também reduz o custo e a responsabilidade dos dados de back-end.

Mais informações

• Análise e monitoramento de usuários reais: ative o desempenho e a usabilidade do design do formulário para que sejam testados e monitorados por usuários reais, e verifique se as mudanças foram bem-sucedidas. Monitore o desempenho de carregamento e outros Web Vitals, bem como as análises de página (qual a proporção de usuários que saem do formulário de endereço sem concluí-lo? Quanto tempo os usuários passam nas páginas do formulário de endereço?) e as análises de interação (com quais componentes da página os usuários interagem ou não?).

• Onde estão seus usuários? Como eles formatam o endereço? Quais nomes são usados para os componentes do endereço, como CEP ou código postal? O Frank's Compulsive Guide to Postal Addresses (em inglês) oferece links úteis e orientações detalhadas sobre formatos de endereço em mais de 200 países.

• Os seletores de país são conhecidos por ter usabilidade ruim. É melhor evitar selecionar elementos para uma lista longa de itens, e o padrão de código de país ISO 3166 atualmente lista 249 países. Em vez de um <select>, considere uma alternativa, como o seletor de país do Instituto Baymard.

  Você pode projetar um seletor melhor para listas com muitos itens? Como você garantiria que seu design seja acessível em vários dispositivos e plataformas? O elemento <select> não funciona bem para um grande número de itens, mas pelo menos pode ser usado em praticamente todos os navegadores e dispositivos de assistência.

  A postagem do blog <input type="country" /> discute a complexidade de padronizar um seletor de país. A localização dos nomes de países também pode ser problemática. A Lista de países tem uma ferramenta para fazer o download de códigos e nomes de países em vários idiomas e formatos.