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?
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.
![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 valores sugeridos heurísticos da interface do navegador; o outro mostra a interface quando há valores de preenchimento automático armazenados.](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=4&hl=pt)
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.
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.
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
).
![Duas capturas de tela de um formulário no Android mostrando como o atributo de entrada enterkeyhint muda o ícone do botão da tecla Enter.](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?authuser=4&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 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.
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.