As senhas são os tipos de entrada que aparecem como ****** . Ele pode ser mostrado ao usuário adicionando um recurso do ícone de olho para que o usuário possa ver a senha.

Abordagem

  • Exibiremos o uso de dois ícones de imagem “ eye.png ” e “ eyeslash.png “
  • Alterne essas imagens usando JavaScript.
  • Iremos alternar o tipo de campo de entrada da senha (texto -> senha e senha -> texto)

Exemplo:

<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
      
    <div class="col-sm-6">
        <form method="post" class="form-group ">
            Username
            <input type="text" name="username" 
                autofocus="" autocapitalize="none" 
                autocomplete="username" required=""
                id="id_username" class="form-control">
                  
            Password
            <input type="password" name="password" 
                class="form-control" 
                autocomplete="current-password" required=""
                id="id_password">
  
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash-300x240.png"
                width="1.8%" height="1%" 
                style="margin-left: -5%;display:inline;
                vertical-align: middle" 
                id="togglePassword">
  
            <button type="submit" class="btn btn-primary">
                Login
            </button>
        </form>
    </div>
</body>
  
<script>
    const togglePassword = 
        document.querySelector('#togglePassword');
          
    const password = document.querySelector('#id_password');
  
    togglePassword.addEventListener('click', function (e) {
  
        // Toggle the type attribute
        const type = password.getAttribute(
            'type') === 'password' ? 'text' : 'password';
        password.setAttribute('type', type);
  
        // Toggle the eye slash icon
        if (togglePassword.src.match(
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png")) {
            togglePassword.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210917145551/eye.png";
        } else {
            togglePassword.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png";
        }
    });
</script>
  
</html>

Saída:        

alternar o campo Senha