Como Criar um Campo de Senha em HTML5: Dominando o input type="password"
O terror dos bisbilhoteiros! Descubra como mascarar os dados do seu usuário e construir formulários de login seguros, abandonando práticas antigas e focando no mercado atual.
Depois das caixas de texto que devoramos no tutorial de HTML passado, chegamos ao elemento que provavelmente é o mais crítico da web: a Caixa de Senha.
Pense bem: qual a funcionalidade número um de qualquer sistema moderno? O famoso Log In. Nele, você fornece uma identificação pública (seu e-mail ou usuário, usando a caixa de texto que já aprendemos) e uma chave secreta (através do formulário que estudaremos neste exato artigo). Vamos codar?
Para que servem as Caixas de Senha em HTML?
Para criar uma caixa de senha segura em HTML, utilizamos a tag <input> com o atributo type="password". Sua principal função é ocultar os caracteres digitados na tela do usuário (geralmente substituindo-os por bolinhas ou asteriscos), evitando que pessoas próximas leiam dados sensíveis.
Ao entrar em seu e-mail, rede social ou até para acessar o painel do seu site, você preenche sua senha. As caixas de senha (password input boxes) não são, estruturalmente, muito diferentes das caixas de texto comuns. A mágica delas mora exclusivamente na renderização visual gerada pelo navegador (o DOM).
A grande vantagem é a privacidade física (também chamada de proteção contra shoulder surfing, ou "surfe de ombro" — aquele curioso olhando a tela do seu computador). Com este tipo de elemento, seus usuários podem digitar a senha no meio de um café lotado sem suar frio.
O HTML mascara a senha na tela, mas quando você clica em "Enviar", ela viaja pela internet. É por isso que você nunca deve criar sites de login sem o protocolo HTTPS (cadeado verde), e em breve, no nosso [INSERIR LINK: CURSO DE PHP], você aprenderá como usar algoritmos de hash (como bcrypt) para criptografar essa senha de vez antes de salvar no Banco de Dados!
Como usar o campo: type="password"
Como dissemos, se você dominou a aula passada, essa aqui vai ser um passeio no parque. A única diferença estrutural é no atributo type, que sai de "text" e vira "password".
Não esqueça da regra de ouro: sempre use o atributo name para que sua linguagem de programação consiga "pescar" essa senha depois, e o atributo id para acessibilidade.
<label for="senha_user">Digite sua Senha:</label>
<input type="password" name="senha" id="senha_user">Resultado Dinâmico (Teste digitar algo):
Viu as bolinhas (ou asteriscos, dependendo do seu sistema operacional)? Fácil e extremamente elegante! Outro detalhe de segurança nativo: escreva algo na caixa de senha da simulação acima, selecione e tente dar Ctrl+C. Não dá! O navegador sabe que é uma senha e proíbe a cópia direta.
Pare de decorar Tags e Aprenda a Pensar como um Dev Sênior! 🚀
Estudar programação caçando pedaços de tutoriais na internet gera lacunas e frustração. Tenha o passo a passo completo, estruturado e focado em projetos reais do mercado no seu bolso, sem depender de internet!
"Eu empacava muito na hora de montar formulários bonitos e responsivos. O módulo de formulários dessa apostila abriu minha cabeça. Didática perfeita!"
— Juliana R., Desenvolvedora Front-End.
Os atributos size e maxlength
Se você criar um formulário simples, o HTML define um tamanho visual padrão para a caixinha. Antigamente, nós usávamos o atributo size para esticar ou encolher essa caixa.
Exemplo obsoleto: <input type="password" size="40">.
Por que obsoleto? Porque hoje quem dita o design visual da página é o CSS. Nós usamos propriedades como width: 100% para adaptar a caixa aos celulares.
Porém, o atributo maxlength continua sendo o rei da segurança na camada do cliente (Front-End). Ele define o limite máximo de caracteres que o campo aceita receber.
Se a regra de negócios do seu sistema exige senhas de até 8 caracteres, limitamos o usuário para que ele não digite acidentalmente uma redação do ENEM no campo da senha:
<label for="senha_banco">Senha do Cartão (Máx 6):</label>
<input type="password" name="senha_cartao" id="senha_banco" maxlength="6">Tente digitar mais que 6 dígitos. O bloqueio é imediato.
O perigo do value nas Senhas e a Solução Moderna
No passado, era ensinado que você poderia preencher uma caixa de senha com valores iniciais usando o atributo value="123456". Se você fizesse isso, a caixa já carregaria na tela exibindo as 6 bolinhas mascaradas.
Hoje, escrever senhas literais dentro do código HTML usando value é uma falha de segurança amadora. Qualquer pessoa pode apertar "Inspecionar Elemento" e ver a senha real que está no código. Em sistemas reais, campos de senha devem nascer sempre vazios.
Se a sua intenção é apenas dar uma "dica" de formatação (ex: Digite apenas números), a prática atual no Front-End moderno é usar o atributo placeholder.
Exercícios de Fixação: Hackeando e Criando
Questão 01: O Inspecionador de Elementos
Abaixo, inserimos um formulário com uma senha fraca usando o atributo value (uma péssima prática, como ensinamos). Sua missão: descubra qual palavra está escondida! Dica ninja: Clique com o botão direito sobre a caixinha abaixo, vá em "Inspecionar" e troque o type="password" por type="text" no painel de desenvolvedor.
Questão 02: Criando o Login Moderno
Seu objetivo é criar um formulário de login real. No passado, alinhávamos com tabelas (<table>). Hoje, usamos estruturas semânticas, organizando os pares em blocos (<div>).
<form action="#" method="POST" style="max-width: 300px; margin: auto; font-family: sans-serif;">
<!-- Grupo de Usuário -->
<div style="margin-bottom: 15px;">
<label for="login_user" style="display: block; font-weight: bold; margin-bottom: 5px;">Usuário:</label>
<input type="text" name="usuario" id="login_user" style="width: 100%; padding: 8px;" placeholder="seu@email.com">
</div>
<!-- Grupo de Senha -->
<div style="margin-bottom: 15px;">
<label for="pass_user" style="display: block; font-weight: bold; margin-bottom: 5px;">Senha:</label>
<input type="password" name="senha" id="pass_user" style="width: 100%; padding: 8px;">
</div>
</form>O que estudar a seguir?
Você acabou de desenhar o formulário, mas ele não faz nada ainda. Para transformar isso num software funcional, leia os próximos artigos em ordem:
- Como processar formulários: A diferença técnica entre Method GET e POST.
- Botões de Ação: O input
type="submit"(Enviar) etype="reset"(Limpar). - Melhorando a experiência: Criando botões de alternância (Mostrar/Ocultar senha) usando um pouco de JavaScript.
Perguntas Frequentes (FAQ) sobre o input password
1. O atributo type="password" criptografa a minha senha e deixa ela 100% segura?
Não! Isso é um equívoco perigoso. O HTML mascara visualmente as letras na tela, escondendo do colega ao lado. Mas quando o formulário é enviado, a senha trafega pela rede em "texto puro". A criptografia real acontece usando certificados SSL/HTTPS no servidor web.
2. Como faço para colocar um ícone de "olho" para o usuário ver a senha que ele digitou?
Você não consegue fazer isso usando apenas HTML e CSS. Essa funcionalidade de "alternar visibilidade" exige um script em JavaScript. A lógica do código é simples: quando o botão de olho é clicado, o JavaScript altera dinamicamente o atributo do campo de type="password" para type="text".
3. Por que meu navegador preenche a senha automaticamente e como evito isso?
Navegadores modernos (Chrome, Firefox, Safari) possuem gerenciadores de senha integrados que identificam o type="password" e autocompletam para facilitar a vida do usuário. Se você está criando um sistema interno restrito e quer desativar isso por razões de segurança, adicione o atributo autocomplete="off" ou autocomplete="new-password" na tag input.
Nenhum comentário:
Postar um comentário