Hello readers, Today in this blog you'll learn how to create a Password Show or Hide Button using HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Form using HTML & CSS. But there aren't a password show hide button/features. Now it's time to create a Password Show Hide Button.
As you know, when we log in or signup on any social platform like Facebook, Instagram then we have to put an email or username and password. Almost all social networks hide passwords by default in a bullet format, and there is a button, text, or checkbox to show our typed characters in the text format.
In the image, you can see there is a password field with the password show hide eye button. This Password Show or Hide Feature-based in Javascript.When you entered some password in that field. At first, those entered characters are in bullet format by default. And, when you click on that eye icon that characters will convert into text format.
If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Password Show Hide Button).
Video Tutorial of Password Show or Hide Toggle Button in JavaScript
If you're a beginner and you haven't knowledge of JavaScript or jQuery. Then you can use this password show hide button in your login form if you have created already. I believe this program I've created will help you a lot to understand the code behind creating this password show hide feature.
If you like this program (Password Show Hide Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
HTML FILE:
If you like this program (Password Show Hide Button) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
Password Show or Hide Button in JavaScript [Source Codes]
As always, before sharing the codes of this program (Password Show Hide Button). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> with the class name "content" and placed all other elements inside it. Then I created <input type="password"> tag in the password field. This input hides characters automatically or shows characters in bullet format. At last, I created a <span> with the class name "show-hide' and inside it, I created another <div> for the eye button.
In the CSS File, first I placed all elements at the center using flex property. After that, I did some styling to icons and password fields. I placed the lock icon on the left side of the password field and placed the eye icon on the right side. Then using :before pseudo-element, I've inserted font awesome icon Unicode "\f070" for show another icon when button clicked.
In the JavaScript File, first I called all the required elements using CSS Selector/class name. Then I created a function and run this function when the button clicked. Inside this function, I put if/else statement. Inside if condition, I wrote if the button clicked and the character's type is a password then change this type into text and otherwise run else statement. Inside else condition, I wrote if the button clicked and the entered characters type is a text then change this type to password.
To create this program (Password Show Hide Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
In the CSS File, first I placed all elements at the center using flex property. After that, I did some styling to icons and password fields. I placed the lock icon on the left side of the password field and placed the eye icon on the right side. Then using :before pseudo-element, I've inserted font awesome icon Unicode "\f070" for show another icon when button clicked.
In the JavaScript File, first I called all the required elements using CSS Selector/class name. Then I created a function and run this function when the button clicked. Inside this function, I put if/else statement. Inside if condition, I wrote if the button clicked and the character's type is a password then change this type into text and otherwise run else statement. Inside else condition, I wrote if the button clicked and the entered characters type is a text then change this type to password.
To create this program (Password Show Hide Button). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
CSS FILE:
You are really ultimate
ReplyDeleteThank you so much.
DeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.