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

Sam Dutton

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

Como você pode criar um formulário que funcione bem para uma variedade de nomes e formatos de endereço? Forma secundária As falhas irritam os usuários e podem fazer com que eles saiam do site ou desistam de concluir uma compra. ou inscrição.

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

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

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

• Clique em Remixar para editar 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á funciona bastante.

Você associou o label ao input combinando o atributo for do label com o name ou id de input. Um toque ou clique em um marcador move o foco para a entrada, tornando-o muito maior do que a entrada sozinha, o que é bom para dedos, polegares e cliques do mouse! Leitores de tela anunciar o texto do rótulo quando o rótulo ou a entrada dele receber foco.

E o name="name"? Esse é o nome (que também é "name") associado aos dados a partir dessa entrada, que é enviada ao servidor quando o formulário é enviado. Incluir 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 na entrada Nome no Chrome? Você verá o preenchimento automático sugestões que o navegador armazenou e suposições são apropriadas para essa entrada, dada a Valores name e id.

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

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

Atualize a página no Chrome e toque ou clique na entrada Nome. Quais diferenças você percebe?

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 específicas. valores que foram usados anteriormente em entradas de formulário que também tinham autocomplete="name". O navegador não é apenas adivinhar o que pode ser apropriado: você tem o controle. Você também verá o menu Gerenciar... para visualizar e editar os nomes e endereços armazenados pelo navegador.

Interface para preenchimento automático com valores suposições, em vez de preenchimento automático.

.

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

Agora, adicione atributos de validação de restrição. maxlength, pattern e required. Assim, o código de entrada ficará 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 permitirá nenhuma entrada com mais de 100 caracteres.

• pattern="[\p{L} \-\.]+" usa uma expressão regular que permite caracteres de letras Unicode, hifens e pontos (pontos completos). Isso significa que nomes como Françoise ou Jörg não são classificados como "inválido". Esse não é o caso se você usar o valor \w, que [permite somente caracteres do alfabeto latino (link em inglês).

• required significa... obrigatório. O navegador não permitirá que o formulário seja enviado sem os dados para este campo, e avisará e destacará a entrada se você tentar enviá-la. Sem códigos extras obrigatório.

.

Atenção : este codelab não aborda a localização ou internacionalização (________). Dependendo da localização dos usuários, você precisa considerar os formatos de endereço e os diferentes nomes usados nos componentes de endereço. É possível até mesmo usar o mesmo idioma: CEP, código postal, Eircode ou PIN. Pode ser necessário que seu site seja personalizado para várias localidades, mas o formulário de endereço neste codelab foi projetado para oferecer flexibilidade e deve funcionar "bem o suficiente" para um intervalo de endereços.

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

• Tente inserir valores que não sejam compatíveis com o atributo pattern.
• Tente enviar o formulário com uma entrada vazia. Você verá um aviso de funcionalidade integrada do navegador o campo obrigatório em branco e definindo o foco.

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 seu formulário:

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

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

Você deve evitar dividir seu formulário de endereço em componentes como nome da rua e número, a menos que necessárias. Não force os usuários a inserir o endereço em campos que não fazem sentido.

Observação : considere a forma como os dados de endereço do seu formulário estão sendo usados. Para que ele 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, somente 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 campo Código postal é opcional porque muitos países não usam códigos postais. O Global Sourcebook oferece informações sobre formatos de endereço para 194 países diferentes, incluindo exemplos de endereços.) O rótulo País ou região é usada em vez de País, porque algumas opções da lista completa (como as Reino Unido) não são países únicos (apesar do valor de autocomplete).

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

Você criou um formulário de endereço altamente funcional, mas e se seu site exigir mais de um para envio e faturamento, por exemplo? Tente atualizar o formulário para que os clientes possam entrar endereços de entrega e cobrança. Como fazer a entrada de dados o mais rápida e fácil possível, especialmente se os dois endereços forem os mesmos? O artigo que acompanha este codelab explica técnicas para lidar com vários endereços. Faça o que fizer, 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 torna mais fácil para que os usuários insiram dados ou copiem e colem, 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:

• O type="tel" garante que os usuários de dispositivos móveis recebam o teclado certo.
• enterkeyhint="done" define o marcador da tecla "Enter" do teclado do dispositivo móvel para mostrar que esta é a última e o formulário já pode ser enviado (o padrão é next).

.

Use o atributo enterkeyhint para definir o rótulo do botão Enter: "próximo" e "Concluído".

.

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

.

Observação : você identifica algum problema no uso de uma única entrada para um número de telefone? Você armazena as peças de números de telefone (código de país e de área) separadamente? Se sim, por quê?

Seu formulário de endereço completo deve ficar assim:

• Teste o formulário em diferentes dispositivos. Quais dispositivos e navegadores você está segmentando? Como poderia melhorar o formulário?

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

• Usar o Modo dispositivo do Chrome DevTools para simular dispositivos móveis.
• Envie o URL do computador para o smartphone.
• Usar um serviço como o BrowserStack para testar em um intervalo 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 de que você não precisa! A maneira mais simples de reduzir a complexidade dos formulários e melhorar a privacidade é remover os campos desnecessários. Armazenar menos dados também reduz o custo e a responsabilidade dos dados de back-end.

Indo mais longe

• Análise e monitoramento de usuários reais: permitem que o desempenho e a usabilidade do design de seu formulário sejam testados e monitorados para usuários reais, e verificar se as alterações foram bem-sucedidas. Monitore o desempenho de carregamento e outras Métricas da Web, bem como análise de página (qual proporção de usuários saem do seu formulário de endereço sem preencher quanto tempo os usuários gastam nas páginas de formulário de endereço?) e análise de interação (qual página com os quais os usuários interagem ou não?)

• Onde seus usuários estão localizados? Como eles formatam o endereço? Que nomes eles usam para endereços como CEP ou código postal? Guia compulsivo de Frank sobre endereços postais fornece links úteis e orientações abrangentes detalhando os formatos de endereços em mais de 200 países.

• Os seletores de país são conhecidos pela usabilidade ruim. É melhor evitar elementos selecionados em 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 Baymard Institute.

  Será que você consegue projetar um seletor melhor para listas com muitos itens? Como você garantiria que seu design está acessíveis 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 dos países também pode ser problemático. A lista de países tem uma ferramenta para fazer o download de códigos e nomes de países em diversos idiomas e formatos.