Hide/Show Password using Eye icon in HTML and JavaScript

Hide/Show Password using Eye icon in HTML and JavaScript

Hide/Show Password using Eye icon in HTML and JavaScript

In this tutorial, I will learn how to hide and show password using eye icon in HTML and JavaScript. I implemented it for one of my projects as below.

This very useful feature you should have on your login form.

There are simple two steps to follow. First, create the HTML login form. Secondly, show/hide the password when the user clicks on the eye icon.

Watch live demo

Don’t miss any of such tips…

Subscribe Our YouTube Channel

Let’s see it step-by-step. I will walk you through the complete code.

1. Create an HTML Login form with an Eye Icon

We are going to place the eye icon inside the password text field. We can use the eye icon from the awesome font script library.

First of all, import the awesome font Stylesheet into your HTML form page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

Use the tag <i> to display the eye icon. This icon is also known as the visibility eye icon.

<i class="far fa-eye" id="togglePassword"></i>

Use the below CSS to put the eye icon at the end of the password text field.

margin-left: -30px; 
cursor: pointer;

If you are new to CSS, refer to how to add CSS in HTML.

Put this tag below the password input field. This is how the sample form will look like with the password field.

<form method="post">
  Username
  <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" required="" id="id_username">
  Password
  <input type="password" name="password" autocomplete="current-password" required="" id="id_password">
  <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
  <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Add JavaScript to Toggle Show/Hide Password

Copy and paste the below code into your JavaScript. This code is self-explanatory if you are familiar with the JavaScript basics.

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
    this.classList.toggle('fa-eye-slash');
});

You can also insert this code in your HTML page with <script> tag.

If you want to excel in JavaScript, I strongly recommend you to refer this Ajax and JavaScript course.

Show/Hide Password in Django

In the sample picture shown above, I have implemented it for one of my websites developed using the Django Python framework. If you are developing it for Django, refer registration and login form in Django.

That’s all. Now you can hide and show passwords using the eye icon in HTML with simple JavaScript and CSS code.

If you find any difficulties or need any customization, let me know in the comment section below.

Aniruddha Chaudhari

Aniruddha Chaudhari

I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.

37 Comments

  3. I am trying on bootstrap the eye icon is showing in the bottom of the input field.
    How can I do that?

    Reply

  4. Hi, Thanks for this! however I’m trying to get it to work on a form with two password fields, how can I do that? for example “type in new password” and “confirm new password”

    Reply

    1. Here you go.
      – Create two different input HTML tags for two password fields.
      – You have to verify if both the passwords are the same. You can do this using JavaScript when the user clicks the submit button

      Reply

  5. Hi! thanks for this. Is there a way to modify the js so that I can get two toggle-able password fields to work in the same form?

    Reply

      1. Sir when I delete the auto increment
        rows from myphp admin the otber line is missing the no. Like
        1
        2
        4
        3 is missing when i delete row 3 from
        the table

        Reply

  7. It is not working even if I copied it too. What’s the issue with it? Everything is correct only the eye icon is not visible.

    Reply

  10. Thanks for your perfect tutorial,
    when I want to change the icon from FONTAWESOME, it doesn’t work.
    like this one :
    Do I need to change the Link?

    thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *