Hello friend, I hope you are doing well. Today you are going to learn how to show and hide passwords in the input field by clicking on the toggle using HTML CSS and JavaScript. There are lots of Login Forms I have created with different animations and features. But many of you have requested me to create input filed label up animation and toggling password visibility, so here we go.
As a definition, password show and hide mean showing or hiding the letter of the passwords by clicking on the toggle button. This type of feature is mostly added to the form for security purposes because many users do not want to show their passwords to those who are around them.
Let's have a look at the given image of our project [how to show and hide password], as you can see on the given image. On the first input field you can see we can't see the letter and eye icon is in hiding condition and on the second password field we can see the letter of password clearly and the eye icon is in show condition.
You can watch the real demo of this project [toggle to show and hide password], and all the HTML CSS, and JavaScript code that I have used to create this project. By watching the full video tutorial you will know how all codes are working behind this project.
Show & Hide Password in HTML CSS & JavaScript
I have provided all the HTML CSS and JavaScript code that I have used to create this project [Show and hide password], before jumping into the source code file you need to know some important points out of this video tutorial.
As you have seen in the video tutorial, At first we can see a password field with a grey border and eye icon, when I focused on the password field password text moved upward, border and eye icon color changed into the blue with the beautiful animation. To make this animation I have used only HTML CSS. After that, I typed some letters which are not visible and when I clicked on the eye icon password was visible and also eye icon changed at the same time, to make these changes I have used some JavaScript code.
I hope, now you can make this project [Show and Hide Password] easily. If you are feeling difficulty building this project, I have provided all the source code below.
To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.
