In this article you will learn how to make show and hide password with checkbox using HTML, CSS, and JavaScript: A simple and effective way to protect your users' passwords while they type them in.
You may have seen, show and hide password option in many login or sign up page (in websites). I have also shared show and hide password using image/icons. In this post, we going to make show and hide password functionality with checkbox by using html css & javascript.
In this post, I made show & hide password functionality with checkbox, means when checkbox is checked, password is shown or otherwise password is hide. Its simple to make it, when input tag type value is equal to text then password shows and if input tag type value is equal to password then password is hidden.
We just have to change the value of type attribute of input tag, when checkbox is checked. Means, if checkbox is checked then, we just have to change the value of type attribute of input tag, to type text (type="text") and if it is unchecked then change the value of type attribute of input tag is to password (type="password"). I hope you understand.
Video Tutorial on Show and Hide Password.
I hope you understand the video.
Here is basic explanation of how we going to make it.
So the input field for password is some looks like this <input type='password' name='password' placeholder='Password'> . As the type of input field is password the text inside is hidden, to make it visible, just add type='text' to show the password and when you want to hide it, just add type='password' to the input tag. And to change the type from text to password and password to text, we use javascript. So lets start making.
Show & Hide Password With Checkbox
File Structure:
- index.html
- index.css
While I've included the JavaScript code directly within the index.html file for convenience, you have the option to create a separate JavaScript file and link it to index.html if you prefer better code organization.
Now, let's move on to the steps involved in creating the show/hide password functionality using a checkbox.
Step 1 : Create basic structure and add boxes.
First, I added a div tag with the class name container. Inside that div, I added another div tag with the class name box and applied styles to it. The box div is intended to house the input field for the password and checkbox.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #0093ff;
position: relative;
}
.box{
width: 350px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
padding: 20px 25px;
background-color: #fff;
}
Output :
Step 2: Add input tags and text.
Next, within a div element with the class box, we will add two input elements: one for a password and another for a checkbox. These will be placed inside a separate div for styling the input checkbox and its corresponding text side-by-side. Refer to the code below for a clearer understanding.
HTML
<input type="password" id="password" placeholder="Password">
<div class="showpassword_box"><input type="checkbox" id="checkbox"><p>Show password</p></div>
CSS
#password{
width: 100%;
font-size: 30px;
padding: 8px 0px;
border-width: 0px 0px 2px 0px;
outline: none;
}
.showpassword_box{
display: flex;
margin-top: 25px;
}
.showpassword_box p{
margin-left: 10px;
font-size: 18px;
}
.box input[type="checkbox"]{
width: 16px;
}
Output :
Step : 3 Add JavaScript for show and hide password functionality.
The following JavaScript code implements a straightforward mechanism: when a user clicks on a checkbox, it verifies the checkbox's state. If the checkbox is checked, the input type is set to "text", revealing the password. And, if the checkbox is unchecked, the input type is set to "password".
By employing this approach, you can seamlessly toggle the visibility of password text with checkbox within a web form, offering a convenient user experience.
Also read: Make checkbox check when click on text with only HTML and CSS.
Also read: Hide div when click outside of it.
JavaScript
let password = document.getElementById("password");
let checkbox = document.getElementById("checkbox");
checkbox.onclick = function(){
if (checkbox.checked) {
password.type = "text";
}else{
password.type = "password";
}
}
Output :
You may like :
- Show & hide password using image/icons.
- Password strength checker or indicator.
- Confirm password validation using JavaScript.
- Create input field that only allows the alphanumeric values with JavaScript.
- Create input field with border animation on focus using only HTML and CSS.
- Create simple password generator functionality using JavaScript.
- Make input field to replace multiple spaces between words to single space using JavaScript.
- Clear input field on click using JavaScript.
Full Code :
And that's it! The password field with a checkbox for showing and hiding the password is now complete, using HTML, CSS, and JavaScript. If you have any questions or suggestions, please feel free to leave them in the comments section below.
Share your thoughts.