Como Criar a Funcionalidade de Mostrar e Ocultar Senhas em um Formulário

No mundo digital de hoje, a segurança é primordial, e os campos de senha são um dos componentes essenciais em formulários de login e registro. No entanto, fornecer uma funcionalidade que permita aos usuários mostrar ou ocultar senhas pode melhorar significativamente a experiência do usuário (UX). Neste tutorial, você aprenderá a implementar essa funcionalidade utilizando HTML, CSS e JavaScript, proporcionando uma interface mais intuitiva e segura para seus projetos.

Introdução à Funcionalidade de Mostrar e Ocultar Senhas

A funcionalidade de mostrar e ocultar senhas é cada vez mais comum em formulários que exigem senhas fortes. Ao dar aos usuários a opção de ver a senha digitada, você permite que eles confirmem se a senha está correta, evitando erros de digitação e possíveis frustrações. Esta funcionalidade geralmente é implementada através de um ícone de olho próximo ao campo de senha, que ao ser clicado, alterna a visibilidade do conteúdo do input.

Estruturação do Projeto com HTML e CSS

Começamos criando a estrutura básica do formulário em HTML. Aqui está um exemplo simples:


<div class="container">
    <div class="card">
        <label for="password">Senha</label>
        <div class="input-container">
            <input type="password" id="password">
            <span id="togglePassword" class="eye-icon">👁</span>
        </div>
    </div>
</div>

O CSS será utilizado para estilizar o formulário e centralizar os elementos na tela:


.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.input-container {
    position: relative;
}

#password {
    padding-right: 30px;
}

.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

Implementação da Funcionalidade com JavaScript

A implementação da lógica de mostrar e ocultar senhas será feita utilizando JavaScript. Vamos adicionar um evento de clique ao ícone de olho, que alternará o tipo do campo de senha entre “password” e “text”.


document.getElementById('togglePassword').addEventListener('click', function (e) {
    const password = document.getElementById('password');
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    this.classList.toggle('active');
});

Nesse código, ao clicar no ícone, o tipo do input alterna entre “password” e “text”. Além disso, podemos adicionar uma classe “active” ao ícone para estilização adicional.

Estilizando o Formulário e Ícones de Senha

Para garantir uma interface agradável, podemos incluir estilos adicionais no nosso CSS. Por exemplo, a mudança de ícone quando a senha está visível pode ser feita utilizando uma classe “active”. Abaixo segue o código CSS atualizado:


.eye-icon.active {
    color: #007BFF;
}

Com esses estilos adicionais, o ícone ficará azul quando a senha estiver visível, proporcionando um feedback visual ao usuário.

Conclusão e Dicas Finais

A implementação da funcionalidade de mostrar e ocultar senhas é uma melhoria simples mas poderosa para a experiência do usuário em formulários. Usando HTML, CSS e JavaScript, você pode facilmente adicionar essa funcionalidade aos seus projetos, tornando-os mais intuitivos e seguros. Além disso, lembre-se de testar a funcionalidade em diferentes navegadores para garantir a melhor compatibilidade possível. Para futuras melhorias, considere adicionar feedback visual adicional, como a cor de realce no campo de entrada quando a senha está visível.

Postagens recentes