Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Toggle Password Visibility using HTML and JavaScript ?

Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 24 Sep, 2021
Improve Article
Save Article
Like Article

Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.


  • We will display the use of two image icons “eye.png” and “eyeslash.png
  • Toggle these images using JavaScript.
  • We will toggle the type of input field of password ( text -> password and password -> text )



<!DOCTYPE html>
    <h2 style="color:green">
    <div class="col-sm-6">
        <form method="post" class="form-group ">
            <input type="text" name="username" 
                autofocus="" autocapitalize="none" 
                autocomplete="username" required=""
                id="id_username" class="form-control">
            <input type="password" name="password" 
                autocomplete="current-password" required=""
            <img src=
                width="1.8%" height="1%" 
                style="margin-left: -5%;display:inline;
                vertical-align: middle" 
            <button type="submit" class="btn btn-primary">
    const 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(
            togglePassword.src =
        } else {
            togglePassword.src =


toggle the Password field

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!