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…
Let’s see it step-by-step. I will walk you through the complete code.
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>
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.
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.
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.
Does this work on WordPress?
Yes. As it is pure JavaScript and HTML/CSS code, it will work on WordPress as well.
It is not working in Firefox. Is it any extra CSS we need to add for the input box or eye icon?
Yes, I am also facing this issue.
bro, apni web site ko online kase kare?
If you have a website running locally, you have to host it on the server to make it live.
You can use vercel.
Image not getting in automate email template in Django how to resolve this issue.
Create email template using HTML. Insert image in the HTML and send it. Hope it will work. Let me know.
Thank you so much!
Keep up with the good tutorials 🙂
You’re welcome, Lamonier!
This keeps me motivated to share more. Happy weekend!
I am trying on bootstrap the eye icon is showing in the bottom of the input field.
How can I do that?
You have to change your CSS accordingly.
Do you correct it? I have the same problem.
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”
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
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?
In that case, write two different input tags for passwords with two different IDs (says id_password_1 and id_password_2). And then write two separate JS functions.
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
This is really difficult to analyze. It would be great if you can share your code snippet.
Hi, you should reset the AI in database.
This is working for edge but not for chrome, its coming as a square box
This should not be the problem as I personally tested it on Google Chrome.
Did you by any chance resolve this problem? because i’m struggling with this too.
If it is not working for you, can you share the console log?
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.
Check the source code of your webpage. If you are seeing the eye icon code, most probably the eye icon component is not well aligned. In that case, use proper padding and margin.
Can we apply it in simple HTML or CSS without an eye icon pic?
You can use the icon from font-awesome. Or if you want to avoid any icon, simply you can use any special character instead of an eye icon.
can you explain the captcha concept in PHP?
Sorry. I don’t have much experience working with PHP.
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
Looks like fontawesome resource file is not loading properly. Please check the console log for the exact reason. You might see some failure logs there.
Nice work.
Thanks! 🙂
I try doing the code on html it didn’t work. It is showing me username and password.
I don’t get you. Are you not able to toggle show/hide password using eye icon?
Thank you very much!
You’re welcome!