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 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 Remixar para editar para tornar o projeto editável.

Observe o HTML do seu formulário em index.html. Você verá 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 o formulário de inscrição. Isso mostra como é um formulário sem nenhum CSS além dos estilos de navegador padrão.

  • Os estilos padrão parecem estar corretos? O que você mudaria para melhorar a aparência do formulário?
  • Os estilos padrão funcionam corretamente? Quais problemas podem ser encontrados usando seu formulário como ele está? E 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 seu formulário

É possível 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 Ver aplicativo para visualizar o formulário de inscrição.

  • Teste o formulário em diferentes dispositivos usando o Device Mode do Chrome DevTools.
  • Agora abra o formulário em um smartphone ou outros dispositivos. Que diferenças você percebe?

Etapa 2: adicionar CSS para melhorar o funcionamento do formulário

Clique em View Source para retornar ao seu 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 vários usuários em dispositivos móveis e computadores.

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

Copie e cole este CSS abaixo no arquivo css/main.css:

Clique em View App para ver o formulário de inscrição estilizado. Em seguida, clique em View Source para retornar para css/main.css.

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

  • Tente ajustar padding, margin e font-size de acordo com 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, novamente, janelas 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ê vai adicionar atributos aos elementos de entrada para permitir que o navegador armazene e preencha automaticamente valores de campos de formulários, além de 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 têm muitas funções: * type="password" oculta o texto conforme é inserido e permite que o gerenciador de senhas do navegador sugira uma senha forte. * type="email" fornece uma validação básica e garante que os usuários de dispositivos móveis tenham um teclado adequado. Experimente!

Clique em Ver aplicativo e, em seguida, clique no marcador E-mail. O que acontece? O foco muda para a entrada do e-mail porque o rótulo tem um valor for que corresponde ao id da entrada do 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 ele ou a entrada associada ao rótulo recebe foco. Você pode fazer isso usando a extensão ChromeVox.

Tente enviar o formulário com um campo vazio. O navegador não envia o formulário, solicita que preencha os dados ausentes e defina o foco. Isso ocorre porque você adicionou o atributo require a todas as entradas. Agora tente usar 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 da senha devido ao atributo minlength="8". O mesmo funciona para pattern (usado para a entrada de nome) e outras restrições de validação. O navegador faz tudo isso automaticamente, sem necessidade de códigos adicionais.

Usar o valor name de autocomplete 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 vai armazenar o endereço de e-mail como o "nome" desse usuário (o nome de usuário) que vai com a senha. * autocomplete="new-password" em Senha é uma dica para o gerenciador de senhas que ele oferece o armazenamento desse 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. Este é o formulário de sign-up.

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

Com o formulário como está, você percebeu algo de errado na entrada da senha?

Há dois problemas: * Não há como saber se há restrições no valor da senha. * Não é possível ver a senha para confirmar se ela está correta.

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 digitar senhas:

  • Um botão (na verdade, apenas texto) para alternar a exibição da senha. A funcionalidade do botão será adicionada com o JavaScript.
  • Um atributo aria-label para o botão de alternância de senha.
  • Um atributo aria-describedby para a entrada de senha. Os leitores de tela lem o texto da etiqueta, 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 arquivo js/main.js.

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

  • Um ícone funcionaria melhor do que um texto para alternar a exibição da 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?

Veja a aparência do seu formulário neste momento:

Mais informações

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

  • Verificando senhas comprometidas. Nunca permita senhas comprometidas. Você pode (e deve) usar um serviço de verificação de senhas para detectar senhas comprometidas. Use um serviço atual ou execute um nos seus próprios servidores. Faça o teste! Adicione a verificação de senha ao formulário.

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

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

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