How to add Eye Icon in Password field in HTML?

Leave a Comment / HTML, JavaScript / By

In this blog, you will learn to add an eye icon in the password field in HTML. We will also use JavaScript to make the icon eye icon work. An Eye icon in the password field will help the users See/Hide the password that they have entered. 

Eye icon in password field

Let’s make its code step by step and walk through the full process:-

HTML & JavaScript code used:-

We will use a form tag to add the fields like username, submit button, and password where the eye icon will be applied. Now to add an eye icon in the password field we first need to import an awesome font stylesheet into your webpage. For which we will use this link:-

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

 

Now that we have imported all the awesome font stylesheet, we will now add an eye icon with the help of <i> tag. For which we will use the:- 

<i class=”far fa-eye” id=”tooglepass”></i>

 

To set the eye icon on the password field we will use inline CSS and add these styles in the <i> tag:-

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

 

Our HTML and CSS code is ready, Now it’s time for JavaScript code which will help in the functioning of the eye icon. So the code for JavaScript is:- 

 const togglePass = document.querySelector(‘#togglePass’);
            const password = document.querySelector(‘#pass’);
            togglePass.addEventListener(‘click’, function (e) {
                const type = password.getAttribute(‘type’) === ‘password’ ? ‘text’ : ‘password’;
                password.setAttribute(‘type’, type);
                this.classList.toggle(‘fa-eye-slash’);
            }

The full code to add the Eye icon in password field in HTML is:-

Index.html

<html>
    <head>
        <title>Eye in password</title>
        <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css”>
    </head>
    <body>
        <form>
            <label>Username</label>
            <br>
            <input type=”text” name=”username” autofocus=”” autocomplete=”username” required=”” id=”username”>
            <br><br>
            <label>Password</label>
            <br>
            <input type=”password” name=”pass” autocomplete=”current-password” required=”” id=”pass”>
            <i class=”far fa-eye” id=”togglePass”
               style=”margin-left: -30px; cursor: pointer;”>
            </i>
            <br><br>
            <button type=”submit” class=”btn”>Login</button>
        </form>
        <script>
            const togglePass = document.querySelector(‘#togglePass’);
            const password = document.querySelector(‘#pass’);
            togglePass.addEventListener(‘click’, function (e) {
                const type = password.getAttribute(‘type’) === ‘password’ ? ‘text’ : ‘password’;
                password.setAttribute(‘type’, type);
                this.classList.toggle(‘fa-eye-slash’);
            }
            );
        </script>
    </body>
</html>

OUTPUT

Eye icon in password field in HTML
hide show password in HTML

Hope this blog post was helpful to you and you have got the answer to your question. Also, If you want to learn about forms or creating a login page. You can check out our detailed post in them. They will be helpful to you.


Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible.

Recent Posts

Similar Posts

Leave a Comment

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