Como você pode criar um formulário que funcione bem para uma variedade de nomes e formatos de endereço? Pequenas falhas no formulário 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 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ê iniciará esta parte do codelab com um formulário vazio, apenas um cabeçalho 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 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á faz muitas coisas.
Você associou o label
ao input
fazendo 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, o que é bom para dedos, polegares e cliques do mouse. Os leitores de tela
anunciam o texto do rótulo quando o rótulo ou a entrada do rótulo recebem foco.
E o name="name"
? Esse é o nome (que provavelmente é "name!") associado aos dados
dessa entrada, que são enviados 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ê vai encontrar sugestões de preenchimento automático
que o navegador armazenou e que as suposições são adequadas para essa entrada, considerando os
valores de 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>
Atualize a página no Chrome e toque ou clique na entrada Nome. Que diferenças você percebe?
Você vai notar uma mudança sutil: com autocomplete="name"
, as sugestões agora são valores
específicos 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 o controle. Você também verá a opção Gerenciar...
para visualizar e editar os nomes e endereços armazenados pelo navegador.
![Duas capturas de tela do Chrome em um smartphone Android mostrando um formulário com uma única entrada, com e sem um valor de preenchimento automático. Um mostra a interface do navegador com sugestões heurísticas, o outro mostra a interface quando há valores de preenchimento automático armazenados.](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=6&hl=pt)
Agora, adicione os 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 permitirá entradas com mais de 100 caracteres.pattern="[\p{L} \-\.]+"
usa uma expressão regular que permite caracteres de letra Unicode, hífens e pontos (pontos completos). Isso significa que nomes como Françoise ou Jörg não são classificados como "inválidos". Esse não é o caso se você usar o valor\w
, que [permite apenas caracteres do alfabeto latino.required
significa... obrigatório. O navegador não permitirá que o formulário seja enviado sem os dados desse campo e vai avisar e destacar a entrada se você tentar enviá-la. Nenhum código extra é necessário.
Para testar como o formulário funciona com e sem esses atributos, insira dados:
- Tente inserir valores que não se encaixam no atributo
pattern
. - Tente enviar o formulário com uma entrada vazia. Você verá um aviso da funcionalidade do navegador integrado sobre o campo obrigatório vazio e a configuração do 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 seu 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 para os usuários inserirem endereços, além de ser ótimo para
recortar 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 inserir o endereço em campos em que não fazem sentido.
Agora adicione os campos CEP ou código postal e País ou região. Para simplificar, apenas os cinco primeiros países estão incluídos aqui. Confira uma lista completa 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, já que muitos países não usam códigos postais.
O Global Sourcebook fornece 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 é 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: permita que os clientes insiram facilmente endereços de entrega e faturamento
Você criou um formulário de endereço altamente funcional, mas e se o site exigir mais de um endereço, para envio e faturamento, por exemplo? Tente atualizar seu formulário para permitir que os clientes insiram endereços de entrega e faturamento. Como você pode tornar a entrada de dados a mais rápida e fácil possível,
especialmente se os dois endereços forem iguais? O artigo que acompanha este codelab explica as
técnicas para processar vários endereços.
Ao fazer o mesmo, use os valores de autocomplete
corretos.
Etapa 5: adicione 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 inserção de dados ou a ação de copiar e colar, simplificar 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 tenham o teclado certo. enterkeyhint="done"
define o identificador da tecla Enter do teclado do dispositivo móvel para mostrar que este é o último campo e o formulário agora pode ser enviado (o padrão énext
).
![Duas capturas de tela de um formulário no Android mostrando como o atributo de entrada enterkeyhint muda o ícone do botão Enter.](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?authuser=6&hl=pt)
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 o formulário poderia 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.
- Envie o URL do computador para o smartphone.
- Use um serviço como o BrowserStack para testar em uma variedade de dispositivos e navegadores.
Mais informações
Monitoramento de análise e usuários reais: permite testar e monitorar o desempenho e a usabilidade do design do formulário para usuários reais e verificar se as alterações foram bem-sucedidas. É preciso monitorar o desempenho de carregamento e outras Métricas da Web, bem como a análise da página (qual proporção de usuários retorna do formulário de endereço sem preenchê-lo? quanto tempo os usuários passam nas páginas de formulário de endereço?) e a análise de interação (com quais componentes da página os usuários interagem ou não?)
Onde seus usuários estão localizados? Como é feita a formatação do endereço? Que nomes eles usam para componentes de endereço, como CEP ou código postal? O Guia compulsivo de Francês para endereços postais fornece links úteis e orientações detalhadas que detalham os formatos de endereços em mais de 200 países.
Os seletores de país são conhecidos pela baixa usabilidade. É melhor evitar selecionar elementos para uma longa lista 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 usar uma alternativa, como o seletor de países do Baymard Institute.Você pode criar um seletor melhor para listas com muitos itens? Como você garantiria que seu design fosse acessível em uma variedade de 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 adaptativos.A postagem do blog <input type="country" /> discute a complexidade de padronizar um seletor de país. A localização de 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.