Criar um formulário de login que siga as práticas recomendadas

Use recursos de navegador multiplataforma para criar formulários de login seguros, acessíveis e fáceis de usar.

Se os usuários precisarem fazer login no seu site, um bom design de formulário de login é fundamental. Isso é especialmente verdadeiro para pessoas com conexões ruins, em dispositivos móveis, com pressa ou sob estresse. Formulários de login mal projetados têm altas taxas de rejeição. Cada rejeição pode significar um cliente perdido e um usuário insatisfeito, não apenas uma oportunidade de login perdida.

Como fazer a implementação

Confira abaixo as diretrizes mais importantes para criar formulários de login de sucesso.

Use um HTML significativo e válido

Aproveite ao máximo os elementos e atributos criados para criar formulários:

• <form>, <input>, <label> e <button>
• type, autocomplete e inputmode

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

Use o elemento <label> para rotular campos de formulário para entrada de dados

Para rotular um <input>, <select> ou <textarea>, use um <label>. Associe um rótulo a uma entrada atribuindo ao atributo for do rótulo o mesmo valor do id da entrada.

Aproveite ao máximo os atributos HTML

Facilite a inserção de dados pelos usuários usando o atributo <type> do elemento <input> adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação básica integrada pelo navegador.

Sempre use type="email" para endereços de e-mail e type="tel" para números de telefone.

Cada elemento <input>, <select> e <textarea> PRECISA ter um atributo autocomplete apropriado para melhorar a acessibilidade e ajudar os usuários a evitar a reinserção de dados.

As entradas de nome de usuário e e-mail contêm identificadores, não texto. Adicione spellcheck="false" para que o navegador não as reescreva em algo que não corresponda à conta. autocorrect e autocapitalize estão sempre desativados para input type="email", mas são obrigatórios para nomes de usuário que não são e-mails.

Criar botões úteis

Use <button> para botões. Você também pode usar <input type="submit">, mas não use um div ou outro elemento aleatório como botão. Os elementos de botão oferecem comportamento acessível, funcionalidade integrada de envio de formulários e podem ser estilizados com facilidade.

Dê a cada botão de envio de formulário um valor que descreva o que ele faz. Use um rótulo claro e reconhecível. Por exemplo, use Fazer login em vez de Continuar ou Enviar.

Use uma única entrada de nome sempre que possível

Permita que os usuários insiram o nome usando uma única entrada, a menos que você tenha um bom motivo para armazenar separadamente nomes, sobrenomes, títulos ou outras partes do nome. Usar uma única entrada de nome torna os formulários menos complexos, permite recortar e colar e simplifica o preenchimento automático.

Permitir nomes internacionais. Para validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. A opção "Somente latim" exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Em vez disso, permita a correspondência de letras Unicode e garanta que seu back-end seja compatível com Unicode de forma segura como entrada e saída. O Unicode em expressões regulares é bem aceito pelos navegadores mais recentes.

Mostrar progresso do login

Para cada etapa do login, use títulos de página e valores de botão descritivos que deixem claro o que precisa ser feito agora e qual é a próxima etapa.

Use o atributo enterkeyhint nas entradas de formulário para definir o rótulo da tecla Enter do teclado de dispositivos móveis. Por exemplo, use enterkeyhint="previous" e enterkeyhint="next" em um formulário de várias páginas, enterkeyhint="done" para a entrada final no formulário e enterkeyhint="search" para uma entrada de pesquisa.

Ajudar os usuários a evitar a reinserção de dados de login

Adicione valores autocomplete apropriados nos formulários de login.

Isso permite que os navegadores ajudem os usuários armazenando com segurança os detalhes de login e inserindo corretamente os dados do formulário. Sem o preenchimento automático, os usuários podem ter mais chances de manter um registro físico dos detalhes de login ou armazenar dados de login de forma insegura no dispositivo.

Valide com cuidado

Valide a entrada de dados em tempo real e antes do envio do formulário. Use type="email" para entradas de e-mail. O navegador vai validar o formato automaticamente. Adicione o atributo required aos campos obrigatórios para evitar envios vazios.

Coloque o login no próprio elemento <form>

Sempre use o elemento <form> quando os usuários precisarem inserir dados.

Não envolva entradas em um <div> e processe o envio de dados de entrada apenas com JavaScript. Em geral, é melhor usar um elemento <form>. Isso torna seu site acessível a leitores de tela e outros dispositivos assistivos, ativa uma variedade de recursos integrados do navegador, simplifica a criação de um login funcional básico para navegadores mais antigos e ainda pode funcionar mesmo se o JavaScript falhar.

Não duplique as entradas

Alguns sites forçam os usuários a inserir e-mails ou senhas duas vezes. Isso pode reduzir os erros para alguns usuários, mas causa trabalho extra para todos e aumenta as taxas de abandono. Pedir duas vezes também não faz sentido quando os navegadores preenchem automaticamente os endereços de e-mail ou sugerem senhas fortes. É melhor permitir que os usuários confirmem o endereço de e-mail (você precisará fazer isso de qualquer maneira) e facilitar a redefinição da senha, se necessário.

Manter as senhas privadas, mas permitir que os usuários as vejam se quiserem

As entradas de senha precisam ter type="password" para ocultar o texto da senha e ajudar o navegador a entender que a entrada é para senhas. Os navegadores usam várias técnicas para entender as funções de entrada e decidir se devem ou não oferecer a opção de salvar senhas.

Adicione uma opção Mostrar senha para que os usuários possam verificar o texto que digitaram e não se esqueça de adicionar um link Esqueci a senha.

Ofereça o teclado certo aos usuários de dispositivos móveis

Use <input type="email"> para oferecer aos usuários de dispositivos móveis um teclado adequado e ativar a validação básica de endereços de e-mail integrada ao navegador, sem precisar de JavaScript.

Se você precisar usar um número de telefone em vez de um endereço de e-mail, o <input type="tel"> ativa um teclado de telefone no dispositivo móvel. Você também pode usar o atributo inputmode quando necessário: inputmode="numeric" é ideal para números de PIN.

Impedir que o teclado do dispositivo móvel obstrua o botão de login

Se você não tomar cuidado, os teclados de dispositivos móveis podem cobrir o formulário ou, pior, obstruir parcialmente o botão de login. Os usuários podem desistir antes de perceber o que aconteceu.

Sempre que possível, evite isso exibindo apenas as entradas de e-mail (ou telefone) e senha e o botão "Fazer login" na parte de cima da página de login. Coloque outro conteúdo abaixo.

Ajudar os usuários a evitar a reinserção de dados

Você pode ajudar os navegadores a armazenar dados corretamente e preencher automaticamente as entradas, para que os usuários não precisem se lembrar de inserir os valores de e-mail e senha. Isso é especialmente importante em dispositivos móveis e crucial para entradas de e-mail, que têm altas taxas de abandono. Há duas partes:

1. Os atributos autocomplete, name, id e type ajudam os navegadores a entender o papel das entradas para armazenar dados que podem ser usados posteriormente para preenchimento automático. Para permitir que os dados sejam armazenados para preenchimento automático, os navegadores mais recentes também exigem que as entradas tenham um valor name ou id estável (não gerado aleatoriamente em cada carregamento de página ou implantação de site) e estejam em um elemento <form> com um botão submit.
2. O atributo autocomplete ajuda os navegadores a preencher automaticamente as entradas usando dados armazenados.

Para entradas de e-mail, use autocomplete="username", já que username é reconhecido por gerenciadores de senhas em navegadores mais recentes, mesmo que você deva usar type="email" e talvez queira usar id="email" e name="email". Para entradas de senha, use o valor autocomplete apropriado para ajudar os navegadores a diferenciar as senhas novas das atuais.

Usar autocomplete="current-password" para uma senha atual

OBRIGATÓRIO: use autocomplete="current-password" para a entrada de senha em um formulário de login. Isso informa ao navegador que você quer usar a senha atual armazenada para o site.

Para um formulário de login:

<input type="password" autocomplete="current-password" id="current-password" …>

Permitir que o navegador sugira uma senha forte

Os navegadores mais recentes usam heurísticas para decidir quando mostrar a interface do gerenciador de senhas e sugerir uma senha forte.

Os geradores de senhas integrados ao navegador evitam que usuários e desenvolvedores precisem descobrir o que é uma "senha forte". Como os navegadores podem armazenar senhas com segurança e preenchê-las automaticamente conforme necessário, os usuários não precisam se lembrar nem digitar senhas. Incentivar os usuários a aproveitar os geradores de senhas integrados ao navegador também significa que eles têm mais chances de usar uma senha forte e exclusiva no seu site e menos chances de reutilizar uma senha que pode ser comprometida em outro lugar.

Evitar que os usuários percam entradas acidentalmente

OBRIGATÓRIO: adicione o atributo required aos campos de e-mail e senha. Os navegadores mais recentes solicitam e definem automaticamente o foco para dados ausentes.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Permitir colar senhas

Alguns sites não permitem que o texto seja colado em entradas de senha.

Não permitir que os usuários colem senhas é algo que os incomoda, incentiva o uso de senhas fáceis de lembrar (e, portanto, mais fáceis de comprometer) e, de acordo com organizações como o National Cyber Security Centre do Reino Unido, pode reduzir a segurança. Os usuários só percebem que a colagem não é permitida depois de tentarem colar a senha. Portanto, não permitir a colagem de senhas não evita vulnerabilidades na área de transferência.

Estratégias de fallback

O preenchimento automático é um aprimoramento progressivo. Em navegadores que não oferecem suporte ao preenchimento automático, os usuários precisam inserir manualmente as credenciais de login. As restrições semânticas de HTML (como type, inputmode e required) ainda vão funcionar corretamente para validar a entrada do usuário e fornecer os teclados virtuais corretos.