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:
- Use o Device Mode do Chrome DevTools para simular dispositivos móveis.
- Envie o URL do computador para o smartphone.
- Use um serviço como o BrowserStack para testar em vários dispositivos e navegadores.
- Teste o formulário usando uma ferramenta de leitor de tela, como a extensão ChromeVox do Chrome.
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
efont-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 menos500px
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.