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

Sam Dutton

Aprenda a criar um formulário de inscrição seguro, acessível e mais fácil de usar. O formulário final está disponível no CodePen.

1. Usar HTML significativo

Aprenda a usar elementos de formulário para aproveitar ao máximo os recursos integrados do navegador.

  1. Crie uma nova Pen.

  2. Copie e cole o código a seguir no editor de HTML.

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

  3. Clique na prévia dinâmica para ver o formulário HTML. Há entradas para nome, e-mail e senha. Este formulário usa apenas o CSS padrão do navegador.

Cada entrada está em uma seção e tem um rótulo. O botão de inscrição é, principalmente, um <button>. Mais adiante neste codelab, você vai aprender os poderes especiais de todos esses elementos.

Faça as seguintes perguntas:

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

Abra a visualização dinâmica do CodePen ou acesse nossa visualização dinâmica. Teste seu formulário em diferentes dispositivos usando o Modo dispositivo do Chrome DevTools.

Agora abra o formulário em um smartphone ou outros dispositivos reais. Quais diferenças você percebe?

2. Adicionar CSS para melhorar o funcionamento do formulário

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ê vai adicionar CSS para facilitar o uso do formulário. Copie e cole este CSS no arquivo css/main.css.

Clique na prévia para ver o formulário de inscrição estilizado.

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

  • Tente ajustar padding, margin e font-size para adequar aos dispositivos de teste.
  • O CSS é mobile-first. Use consultas de mídia para aplicar regras de CSS a janelas de visualização com pelo menos 400px de largura e depois 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?

3. Adicionar atributos para ajudar os usuários a inserir dados

Adicione atributos aos elementos de entrada para permitir que o navegador armazene e preencha automaticamente valores de campos de formulário e avise sobre campos com dados ausentes ou inválidos.

Atualize o 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 muito trabalho:

  • O type="password" oculta o texto à medida que ele é inserido e permite que o gerenciador de senhas do navegador sugira uma senha forte.
  • O type="email" oferece validação básica e garante que os usuários de dispositivos móveis recebam um teclado adequado.

Na prévia, clique 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 marcador quando ele (ou a entrada associada) recebe o foco.

Tente enviar o formulário com um campo vazio. O navegador não envia o formulário, pede para preencher os dados ausentes e define o foco. Isso porque adicionamos 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.

Usar o 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 deve 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.

4. Ajudar os usuários a inserir senhas seguras

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 ver a senha para verificar 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" 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 de senha. (A funcionalidade do botão será adicionada com 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 leem 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 o JavaScript e cole no editor JavaScript.

  • Um ícone funcionaria melhor do que texto para ativar/desativar a exibição de senha? Teste a avaliação 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ê pode preencher o formulário usando apenas o ChromeVox? Se não, o que você mudaria?

Vá além

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

  • Verificando se há senhas comprometidas. Nunca permita senhas que foram comprometidas. Você pode (e deve) usar um serviço de verificação de senhas para detectar senhas comprometidas.

  • Inclua links para os documentos de Termos de Serviço e Política de Privacidade. Deixe claro para os usuários como você protege os dados deles.

  • Atualize o estilo e a marca dos formulários para que eles correspondam ao restante do site. Isso ajuda os usuários a se sentirem confortáveis de que estão no lugar certo ao inserir nomes e endereços, e principalmente ao fazer pagamentos.

  • Adicione análises 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.