Codelab de práticas recomendadas para formulários de inscrição

Sam Dutton

Este codelab mostra como criar um formulário de inscrição seguro, acessível e fácil de usar.

Etapa 1: use um HTML significativo

Nesta etapa, você aprenderá a usar elementos de formulário para aproveitar ao máximo os recursos integrados do navegador.

  • Clique em Remixar para editar para tornar o projeto editável.

Confira o HTML do seu formulário em index.html. Você verá que há entradas para nome, e-mail e senha. Cada um está em uma seção e cada um tem um rótulo. O botão Sign up é... um <button>! Mais adiante neste codelab, você vai aprender os poderes especiais de todos esses elementos.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Clique em Ver aplicativo para visualizar seu formulário de inscrição. Isso mostra a aparência de um formulário sem um CSS diferente do estilos padrão de navegador.

  • Os estilos padrão parecem corretos? O que você mudaria para melhorar o formulário?
  • Os estilos padrão funcionam corretamente? Quais problemas podem ser encontrados ao usar seu formulário do modo como ele está? O quê? no celular? E para leitores de tela ou outras tecnologias assistivas?
  • Quem são seus usuários e quais dispositivos e navegadores você está segmentando?
.

Testar o formulário

É possível adquirir muito hardware e configurar device lab, mas existem maneiras mais baratas e simples de testar seu formulário em vários navegadores, plataformas e dispositivos:

.

Clique em Ver aplicativo para visualizar seu formulário de inscrição.

  • Teste seu formulário em diferentes dispositivos usando o Modo dispositivo do Chrome DevTools.
  • Agora abra o formulário em um smartphone ou em outro dispositivo real. Quais diferenças você percebe?

Etapa 2: adicionar CSS para que o formulário funcione melhor

Clique em Exibir código-fonte para retornar ao código-fonte.

Não há nada de errado com o HTML até agora, mas você precisa garantir que seu formulário funcione bem para uma de usuários em dispositivos móveis e computadores.

Nesta etapa, você adicionará CSS para facilitar o uso do formulário.

Copie e cole todo o CSS a seguir no arquivo css/main.css:

Clique em Ver aplicativo para conferir seu formulário de inscrição estilizado. Em seguida, clique em Ver código-fonte para retornar à css/main.css

  • Este CSS funciona com vários navegadores e tamanhos de tela?

  • Ajuste padding, margin e font-size de acordo com seus dispositivos de teste.

  • O CSS prioriza dispositivos móveis. Consultas de mídia são usados para aplicar regras CSS para janelas de visualização com pelo menos 400px de largura e novamente para janelas de visualização com pelo menos 500px de largura. Esses são os pontos de interrupção? adequadas? Como você deve escolher pontos de interrupção para formulários?

.

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

Nesta etapa, você vai adicionar atributos aos elementos de entrada para permitir que o navegador armazene e preencha automaticamente. valores de campo de formulário e avisar sobre campos com dados ausentes ou inválidos.

Atualize o arquivo index.html para que o código do formulário fique assim:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Os valores type fazem muitas coisas: * type="password" oculta o texto conforme ele é inserido e ativa a gerenciador de senhas para sugerir uma senha forte. * type="email" oferece validação básica e garante que os usuários de dispositivos móveis recebam um teclado adequado. Testar

Clique em Ver app e no marcador E-mail. O que acontece? O foco vai para o e-mail entrada porque o marcador tem um valor for que corresponde ao id da entrada do e-mail. Os outros rótulos e funcionam da mesma forma. Os leitores de tela também anunciam o texto do rótulo quando o rótulo entrada associada) recebe o foco. Tente fazer isso usando a extensão ChromeVox.

Tente enviar o formulário com um campo vazio. O navegador não enviará o formulário e solicitará completar os dados ausentes e definir o foco. Isso ocorre porque você adicionou o atributo require a todas as de entrada. Agora tente enviar com uma senha que tenha menos de oito caracteres. O navegador avisará que a senha não é longa o suficiente e define o foco na entrada de senha devido ao minlength="8" . O mesmo funciona para pattern (usado para a entrada de nome) e outros restrições de validação. O navegador faz tudo isso automaticamente, sem precisar de nenhum código extra.

Usar o valor name de autocomplete para a entrada Nome completo faz sentido, mas e quanto ao outras entradas? * autocomplete="username" na entrada E-mail significa que o gerenciador de senhas do navegador armazenará o endereço de e-mail como "name" para esse usuário (o nome de usuário!) seguir a senha. * autocomplete="new-password" para Password é uma dica para o gerenciador de senhas de que ela deve oferecer para armazenar esse valor como a senha do site atual. Em seguida, você pode usar autocomplete="current-password" para ativar o preenchimento automático em um formulário de login (esse é formulário de inscrição).

Etapa 4: ajudar os usuários a inserir senhas seguras

Com o formulário como está, você notou algo de errado com a senha inserida?

Há dois problemas: * Não há como saber se há restrições no valor da senha. * Você não consegue ver a senha para verificar se acertou.

Não deixe os usuários adivinharem.

Atualize a seção de senha do index.html com o seguinte código:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Isso adiciona novos recursos para ajudar os usuários a inserir senhas:

  • Um botão (na verdade, apenas texto) para alternar a exibição da senha. O a funcionalidade do botão será adicionada com JavaScript.)
  • Um atributo aria-label para o botão de ativação de senha.
  • Um atributo aria-describedby para a entrada de senha. Leitores de tela ler o texto do rótulo, o tipo de entrada (senha) e a descrição.

Para ativar o botão de alternância de senhas e mostrar aos usuários informações sobre restrições de senha, copie todo o JavaScript abaixo e cole no seu arquivo js/main.js.

O CSS já está em vigor desde a etapa 2. Confira como funciona o botão de alternância de senhas estilizada e posicionada.

  • Um icon funcionaria melhor do que um texto ativar ou desativar a exibição de senha? Teste o Teste de usabilidade com desconto com um pequeno grupo de amigos ou colegas.

  • Para saber como os leitores de tela funcionam com formulários, instale a extensão ChromeVox e navegue pelo formulário. Você poderia preencher o formulário usando apenas o ChromeVox? Se não, o que você mudaria?

Confira como seu formulário vai ficar neste momento:

Indo mais longe

Este codelab não abrange vários recursos importantes:

  • Procurando senhas comprometidas. Nunca permita senhas comprometidas. Você pode (e deve) usar um serviço de verificação de senhas para detectar senhas comprometidas. É possível usar um serviço atual ou executar um nos seus servidores. Faça o teste! Adicionar senha verificando seu formulário.

  • Link para seus Termos de Serviço e documentos da Política de Privacidade: deixe claro para os usuários como você proteger os dados.

  • Estilo e branding: verifique se eles combinam com o restante do site. Ao inserir nomes e endereços e ao efetuar pagamentos, os usuários precisam se sentir à vontade, confiantes de que ainda estão no lugar certo.

  • 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.