Criar um formulário de inscrição que siga as práticas recomendadas

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

Se os usuários precisarem se inscrever no seu site, um bom design de formulário de inscrição é fundamental. Isso é especialmente verdadeiro para pessoas com conexões ruins, em dispositivos móveis, com pressa ou sob estresse. Formulários de inscrição mal elaborados 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 inscrição perdida.

Como fazer a implementação

Confira abaixo as diretrizes mais importantes para criar formulários de inscrição 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 Criar conta ou Inscrever-se 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 da inscrição

Para cada etapa da inscrição, use cabeçalhos 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 inscrição

Adicione valores de autocomplete adequados nos formulários de inscrição.

Isso permite que os navegadores ajudem os usuários armazenando com segurança os detalhes de inscrição e inserindo corretamente os dados do formulário. Sem o preenchimento automático, é mais provável que os usuários mantenham um registro físico dos detalhes de inscrição ou armazenem os dados de inscrição 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. Para senhas, use um atributo pattern para aplicar requisitos de segurança e fornecer mensagens de erro claras quando a validação falhar. Adicione o atributo required aos campos obrigatórios para evitar envios vazios.

Coloque a inscrição 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 com o Assistente, ativa uma variedade de recursos integrados do navegador, simplifica a criação de inscrições funcionais básicas 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 "Inscrever-se"

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 inscrição. Os usuários podem desistir antes de perceber o que aconteceu.

Sempre que possível, evite isso mostrando apenas as entradas de e-mail (ou telefone) e senha e o botão "Inscrever-se" na parte de cima da página de inscrição. 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.

Use autocomplete="new-password" para uma nova senha

OBRIGATÓRIO: para um formulário de inscrição, use autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

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

Adicione o atributo required aos campos de e-mail e senha. Os navegadores mais recentes solicitam e definem automaticamente o foco para dados ausentes.

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.

Oferecer login de terceiros

Muitos usuários preferem fazer login em sites usando um formulário de inscrição com endereço de e-mail e senha. No entanto, você também precisa permitir que os usuários façam login usando um provedor de identidade de terceiros, também conhecido como login federado.

Essa abordagem tem várias vantagens. Para usuários que criam uma conta usando o login federado, não é necessário pedir, comunicar ou armazenar senhas.

Também é possível acessar outras informações verificadas do perfil pelo login federado, como um endereço de e-mail. Isso significa que o usuário não precisa inserir esses dados, e você não precisa fazer a verificação. O login federado também pode facilitar muito para os usuários quando eles compram um novo dispositivo.

Cuidado com os nomes de usuário

Não insista em um nome de usuário, a menos que (ou até que) você precise de um. Permita que os usuários se inscrevam e façam login apenas com um endereço de e-mail (ou número de telefone) e uma senha, ou login federado, se preferirem. Não force os usuários a escolher e lembrar um nome de usuário.

Se o site exigir nomes de usuário, não imponha regras desarrazoadas nem impeça que os usuários atualizem os nomes. No back-end, gere um ID exclusivo para cada conta de usuário, não um identificador com base em dados pessoais, como o nome de usuário.

Além disso, use autocomplete="username" para nomes de usuário.

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 só precisam inserir manualmente as credenciais de inscrição. 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.