Open In App
Related Articles

How to Toggle Password Visibility using HTML and JavaScript ?

Improve Article
Save Article
Like Article

In this article, we will learn about how to toggle password visibility using HTML and Javascript. 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.

Approach: The following approach will be implemented to toggle visibility of 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 )

Example: In this example, we will see the toggling the Password Visibility using HTML and JavaScript.


<!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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 15 May, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials