Hello readers, Today in this blog you’ll learn how to create a Toggle Button to Show or Hide Password using HTML CSS & JavaScript. Earlier I have shared a blog on how to create an Animated Login Form Design and now I’m going to create Password Show Hide Toggle Button.
Generally, Password Show or Hide Toggle lets you easily hide or show passwords via JavaScript. The logic behind it is, at first, the type of input is a password, so the characters are in the bullet format, but when you click on the toggle button or icon, then the type of input changes into the text from the password and the password visible.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Password Show or Hide Toggle).
Video Tutorial of Password Show or Hide Toggle
In the video, you have seen the password toggle to show or hide the entered password and I hope you have understood the basic codes behind creating this program. As you know, I used JavaScript to change the input type into text on the icon or button click. If you’re a beginner then you can also create this toggle button because it’s not hard to understand the JavaScript codes.
If you like this program (Password Show or Hide Toggle) 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. You can use this Toggle Button in your Login & Signup Form.
You might like this:
Password Show or Hide Toggle [Source Codes]
To create this program (Password Show or Hide Toggle). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Password Show or Hide Toggle | CodeLab</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<input type="password" placeholder="Enter Password" required>
<span class="show-btn"><i class="fas fa-eye"></i></span>
</div>
<script>
const passField = document.querySelector("input");
const showBtn = document.querySelector("span i");
showBtn.onclick = (()=>{
if(passField.type === "password"){
passField.type = "text";
showBtn.classList.add("hide-btn");
}else{
passField.type = "password";
showBtn.classList.remove("hide-btn");
}
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #8e44ad;
}
.wrapper{
position: relative;
height: 55px;
width: 320px;
border-radius: 5px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.wrapper input{
width: 100%;
height: 100%;
border: 1px solid #8e44ad;
padding-left: 15px;
font-size: 18px;
outline: none;
border-radius: 5px;
}
.wrapper input::placeholder{
font-size: 17px;
}
.wrapper span{
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #8e44ad;
cursor: pointer;
display: none;
}
.wrapper input:valid ~ span{
display: block;
}
.wrapper span i.hide-btn::before{
content: "\f070";
}
That’s all, now you’ve successfully created a Password Show or Hide Toggle using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
