Use os recursos do navegador em várias plataformas para criar um formulário de login

Sam dutton

Este codelab ensina como criar um formulário de login seguro, acessível e fácil de usar.

1. Use HTML com significado

Use os elementos criados para o trabalho:

  • <form>
  • <section>
  • <label>
  • <button>

Esses elementos ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à marcação.

  1. Clique em Remix para editar e tornar o projeto editável.

  2. Adicione o seguinte código ao elemento <body>:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    Confira a aparência do arquivo index.html nesse momento:

  3. Clique em Ver aplicativo para visualizar o formulário de login. O HTML adicionado é válido e correto, mas o estilo padrão do navegador torna o site horrível e difícil de usar, especialmente em dispositivos móveis.

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

2. Design para dedos e polegares

Ajuste o padding, as margens e os tamanhos de fonte para garantir que as entradas funcionem bem em dispositivos móveis.

  1. Copie e cole o seguinte CSS no seu arquivo style.css:

  2. Clique em Ver app para conferir o novo formulário de login.

  3. Clique em View Source para retornar ao arquivo style.css.

É uma grande quantidade de código. As principais coisas a serem observadas são as mudanças nos tamanhos:

  • padding e margin são adicionados às entradas.
  • O font-size é diferente para dispositivos móveis e computadores.

O seletor :invalid é usado para indicar quando uma entrada tem um valor inválido. Isso ainda não funciona.

O layout do CSS prioriza dispositivos móveis:

  • O CSS padrão é destinado a janelas de visualização com menos de 450 pixels de largura.
  • A seção de consulta de mídia define substituições para janelas de visualização com pelo menos 450 pixels de largura.

Ao criar um formulário como este, é muito importante testar o código em dispositivos reais no computador e em dispositivos móveis neste ponto do processo:

  • O rótulo e o texto de entrada são legíveis, especialmente para pessoas com baixa visão?
  • As entradas e o botão Fazer login são grandes o suficiente para serem usados como áreas de toque para as miniaturas?

3. Adicionar atributos de entrada para ativar recursos integrados do navegador

Ative o navegador para armazenar e preencher valores de entrada automaticamente e permitir acesso a recursos integrados de gerenciamento de senhas.

  1. Adicione atributos ao HTML do formulário para que ele fique assim:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. Confira seu app novamente e clique em E-mail.

    Observe como o foco muda para a entrada do e-mail. Isso ocorre porque o rótulo está associado à entrada pelo atributo for="email". Os leitores de tela também anunciam o texto do marcador quando o marcador ou a entrada associada ao marcador recebe foco.

  3. Concentre a entrada de e-mail em um dispositivo móvel.

    O teclado é otimizado para digitar um endereço de e-mail. Por exemplo, os caracteres @ e . podem ser mostrados no teclado principal, e o sistema operacional pode mostrar os e-mails armazenados acima do teclado. Tudo isso acontece porque o atributo type="email" é aplicado a um elemento <input>.

    O teclado de e-mail padrão no iOS.

  4. Digite algum texto na entrada de senha.

    O texto fica oculto por padrão porque o atributo type="password" foi aplicado ao elemento.

  • Os atributos autocomplete, name, id e type ajudam os navegadores a entender o papel das entradas para armazenar dados que podem ser usados depois para o preenchimento automático.
  1. Foque a entrada de e-mail em um dispositivo desktop e digite um texto. Para ver o URL do seu app, clique em Tela cheia Ícone de tela cheia. Se você armazenou endereços de e-mail no navegador, provavelmente verá uma caixa de diálogo que permite selecionar um desses e-mails armazenados. Isso acontece porque o atributo autocomplete="username" é aplicado à entrada do e-mail.
  • autocomplete="username" e autocomplete="current-password" ajudam os navegadores a usar valores armazenados para preencher automaticamente as entradas.

Diferentes navegadores usam diferentes técnicas para entender a função das entradas de formulário e fornecer o preenchimento automático para vários sites diferentes.

Adicione e remova atributos para testar por conta própria.

É extremamente importante testar o comportamento entre plataformas. Insira os valores e envie o formulário em diferentes navegadores de dispositivos diferentes. É fácil testar em várias plataformas com o BrowserStack, que é sem custo financeiro para projetos de código aberto (link em inglês). Confira!

Confira a aparência do arquivo index.html nesse momento:

4. Adicionar interface para alternar a exibição da senha

Os especialistas em usabilidade recomendam fortemente a adição de um ícone ou botão para mostrar o texto que os usuários digitam no campo Senha. Não há uma maneira integrada de fazer isso, então é necessário implementar você mesmo com o JavaScript.

O código para adicionar essa funcionalidade é direto. Esse exemplo usa texto, não um ícone.

Atualize os arquivos index.html, style.css e script.js desta forma.

  1. Adicione um botão de alternância à seção de senha no arquivo index.html:

    <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="current-password" required>
</section>

  2. Adicione o seguinte CSS à parte inferior do arquivo style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    Isso faz com que o botão Mostrar senha pareça um texto simples e o exiba no canto superior direito da seção de senha.

  3. Adicione o seguinte JavaScript ao arquivo script.js para alternar a exibição de senhas e definir o aria-label apropriado:

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. Teste a lógica de exibição de senha agora.

    1. Veja o app.

    2. Digite uma mensagem no campo da senha.

    3. Clique em Mostrar senha.

  5. Repita a quarta etapa em vários navegadores e sistemas operacionais diferentes.

Pense no design de UX: os usuários vão perceber e entender a opção Mostrar senha? Existe uma maneira melhor de oferecer essa funcionalidade? Este é um bom momento para testar descontos no teste de usabilidade com um pequeno grupo de amigos ou colegas.

Para entender como essa funcionalidade funciona para leitores de tela, instale a extensão ChromeVox Classic e navegue pelo formulário. Os valores aria-label funcionam conforme o esperado?

Alguns sites, como o Gmail, usam ícones, não texto, para alternar a exibição de senhas. Quando terminar este codelab, implemente-o com imagens SVG. O Material Design (link em inglês) oferece ícones de alta qualidade para download sem custo financeiro.

Confira como o código vai ficar nesse ponto:

5. Adicionar validação de formulário

Você pode ajudar os usuários a inserir os dados corretamente ao permitir que eles validem os dados antes do envio do formulário e mostre o que precisam ser alterados.

Os elementos e atributos de formulário HTML têm recursos integrados para validação básica, mas você também deve usar JavaScript para fazer uma validação mais robusta enquanto os usuários inserem dados e quando tentam enviar o formulário.

Esta etapa usa a API Constraint Validation (que tem ampla compatibilidade) para adicionar validação personalizada com interface do navegador integrada que define o foco e mostra solicitações.

Informe aos usuários as restrições de senhas e outras entradas. Não os faça adivinhar!

  1. Atualize a seção de senha do arquivo index.html:

    <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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Com isso, há dois novos recursos:

  • Informações sobre restrições de senha
  • Um atributo aria-describedby para a entrada de senha (os leitores de tela leem o texto da etiqueta, o tipo de entrada (senha) e a descrição.

  1. Adicione o seguinte CSS à parte inferior do arquivo style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. Adicione o seguinte JavaScript ao arquivo script.js:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. Confira!

    Todos os navegadores recentes têm recursos integrados para validação de formulário e validação de suporte com JavaScript.

    1. Insira um endereço de e-mail inválido e clique em Fazer login. O navegador exibirá um aviso. Não é necessário ter o JavaScript.

    2. Digite um endereço de e-mail válido e clique em Fazer login sem um valor de senha. O navegador avisará que você perdeu um valor obrigatório e definirá o foco na entrada da senha.

    3. Digite uma senha inválida e clique em Fazer login. Agora você verá mensagens diferentes dependendo do que estiver errado.

  4. Tente ajudar os usuários a inserir endereços de e-mail e senhas de várias formas. Campos de formulário de senha melhores oferecem algumas sugestões inteligentes.

    Confira como o código vai ficar nesse ponto:

Vá além

Eles não são mostrados neste codelab, mas você ainda precisa destes quatro recursos cruciais de formulário de login:

  • Adicione o botão Esqueceu sua senha?, que facilita a redefinição de senhas para os usuários.

  • Crie um link para os documentos dos Termos de Serviço e da Política de Privacidade para que os usuários saibam como você protege os dados deles.

  • Considere o estilo e o branding, e certifique-se de que esses recursos adicionais combinem com o restante do seu site.

  • Adicione Analytics e RUM para testar e monitorar o desempenho e a usabilidade do design do formulário.