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: usar HTML significativo

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

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

Confira o HTML do formulário em index.html. Você vai notar que há campos para nome, e-mail e senha. Cada um está em uma seção e tem um rótulo. O botão Inscrever-se é… 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 Visualizar app para conferir uma prévia do formulário de inscrição. Isso mostra como um formulário fica sem CSS, exceto os estilos padrão do navegador.

  • Os estilos padrão estão corretos? O que você mudaria para melhorar a aparência do formulário?
  • Os estilos padrão funcionam? Quais problemas podem ser encontrados ao usar seu formulário como está? E em dispositivos móveis? E para leitores de tela ou outras tecnologias adaptativas?
  • Quem são seus usuários e quais dispositivos e navegadores você está segmentando?

Testar o formulário

Você pode adquirir muito hardware e configurar um laboratório de dispositivos, mas há maneiras mais baratas e simples de testar seu formulário em vários navegadores, plataformas e dispositivos:

Clique em Visualizar app para conferir uma prévia do 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 outro dispositivo real. Quais são as diferenças?

Etapa 2: adicionar CSS para melhorar o formulário

Clique em View Source para retornar ao código-fonte.

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

Nesta etapa, você vai 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 app para conferir o formulário de inscrição com estilo. Em seguida, clique em View Source para retornar a css/main.css.

  • Esse CSS funciona para vários navegadores e tamanhos de tela?

  • Ajuste padding, margin e font-size para que se adaptem aos seus dispositivos de teste.

  • O CSS prioriza dispositivos móveis. As consultas de mídia são usadas para aplicar regras de CSS a janelas de visualização com pelo menos 400px de largura e, em seguida, a janelas de visualização com pelo menos 500px de largura. Esses pontos de interrupção são adequados? Como escolher pontos de interrupção para formulários?

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

Nesta etapa, você adiciona atributos aos elementos de entrada para permitir que o navegador armazene e preencha automaticamente os valores dos campos de formulário e avise 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 de type fazem muito: * type="password" oculta o texto conforme ele é inserido e permite que o gerenciador de senhas do navegador sugira uma senha forte. * type="email" fornece validação básica e garante que os usuários de dispositivos móveis tenham um teclado adequado. Teste isso!

Clique em Visualizar app e no rótulo E-mail. O que acontece? O foco muda para a entrada de e-mail porque o rótulo tem um valor for que corresponde ao id da entrada de e-mail. Os outros rótulos e entradas funcionam da mesma forma. Os leitores de tela também anunciam o texto do rótulo quando o rótulo (ou a entrada associada a ele) recebe o foco. Você pode tentar fazer isso usando a extensão ChromeVox.

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

O uso do valor autocomplete name para a entrada Nome completo faz sentido, mas e as outras entradas? * autocomplete="username" para a entrada E-mail significa que o gerenciador de senhas do navegador vai armazenar o endereço de e-mail como o "nome" desse usuário (o nome de usuário!) para acompanhar a senha. * autocomplete="new-password" para Senha é uma dica para o gerenciador de senhas de que ele precisa oferecer o armazenamento desse valor como a senha do site atual. Em seguida, use autocomplete="current-password" para ativar o preenchimento automático em um formulário de login (lembre-se de que este é um formulário de inscrição).

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

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

Há dois problemas: * Não há como saber se há restrições no valor da senha. * Não é possível conferir se você acertou a senha.

Não faça os usuários adivinharem!

Atualize a seção de senha de 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. A funcionalidade do botão será adicionada com JavaScript.
  • Um atributo aria-label para o botão de alternar a senha.
  • Um atributo aria-describedby para a entrada de senha. Os leitores de tela lêem o texto do rótulo, o tipo de entrada (senha) e a descrição.

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

O CSS já está em vigor desde a etapa 2. Confira como o botão de alternância de senha é estilizado e posicionado.)

  • Um ícone funcionaria melhor do que o texto para alternar a exibição da senha? Teste a versão simplificada do teste de usabilidade com um pequeno grupo de amigos ou colegas.

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

Confira como seu formulário deve ficar:

Mais informações

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

  • Verificação de senhas comprometidas. Nunca permita senhas que tenham sido comprometidas. Você pode (e deve) usar um serviço de verificação de senha para detectar senhas comprometidas. Você pode usar um serviço existente ou executar um nos seus próprios servidores. Faça um teste Adicione a verificação de senha ao formulário.

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

  • Estilo e marca: verifique se eles correspondem ao restante do site. Ao inserir nomes e endereços e fazer pagamentos, os usuários precisam se sentir à vontade, confiando que estão no lugar certo.

  • Análise e monitoramento de usuários reais: permita que o desempenho e a usabilidade do design do formulário sejam testados e monitorados para usuários reais.