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ê verá que há entradas 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 a aparência de um formulário sem CSS além dos estilos padrão de navegador.

  • Os estilos padrão parecem 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 do modo como ele está? E em dispositivos móveis? 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

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 diferenças você nota?

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 seu formulário funcione bem para diversos usuários de 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 app para conferir seu 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?

  • Tente ajustar 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" oferece validação básica e garante que os usuários de dispositivos móveis recebam 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. Tente 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 ocorre porque você adicionou o atributo require a todas as entradas. Agora tente enviar com uma senha com 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" na entrada E-mail significa que o gerenciador de senhas do navegador armazenará o endereço de e-mail como o "nome" desse usuário (o nome de usuário!) para seguir 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 é possível saber se há restrições no valor da senha. * Você não consegue ver a senha para verificar se acertou.

Não faça 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. 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 o Teste de usabilidade com desconto 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 abrange 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 seu 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 confortáveis, 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.