Hello friends, and welcome! Today, you will learn how to hide and show passwords using HTML, CSS, and JavaScript. I have developed various Login Forms with their animations and features; many of you have asked me for input field label animations and toggle password visibility features – here they are!
You can reveal or conceal your password’s letters by pressing the toggle button. This feature has been included as an extra security measure, as many users wish to keep their passwords private.
Look at the image below; it clearly demonstrates how to hide and reveal a password. In one input field, password letters remain concealed, while in another, we can clearly see them.
I created this project with code. By following along, you’ll learn how to code this project yourself!
Make an Array to Hide/Show Password in HTML CSS & JavaScript
Before jumping into source code development, it is vital to comprehend some critical points from this video tutorial.
Watching this video, it is clear that initially, there was only a grey border around our password field with an eye icon. But as soon as I focused on that password field, the text moved up, the border changed from grey to blue, and the eye icon and border colour altered accordingly – this animation was produced entirely using HTML CSS! To achieve such results.
I hope that creating the Show and Hide Password project is straightforward for you. If you need assistance building it, all necessary source codes are listed below.
Access Contact Form Validate Password on Login/Signup Form [Source Code]
After you have created two files—HTML and CSS—copy and paste their respective source codes from these two documents into this Login & Registration Form. By clicking download, you can get all its source code.
<!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">
<!----==== CSS ====-->
<link rel="stylesheet" href="style.css">
<!----==== Icounscout Link ====-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<title>Password Show & Hide</title>
</head>
<body>
<div>
<div>
<input type="password" spellcheck="false" required>
<label for="">Password</label>
<i></i>
</div>
</div>
<script>
const toggle = document.querySelector(".toggle"),
input = document.querySelector("input");
toggle.addEventListener("click", () =>{
if(input.type ==="password"){
input.type = "text";
toggle.classList.replace("uil-eye-slash", "uil-eye");
}else{
input.type = "password";
}
})
</script>
</body>
</html>
/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4070f4;
}
.container{
position: relative;
max-width: 340px;
width: 100%;
padding: 20px;
border-radius: 6px;
background-color: #fff;
}
.container .input-box{
position: relative;
height: 50px;
}
.input-box input{
position: absolute;
height: 100%;
width: 100%;
outline: none;
border: 2px solid #ccc;
border-radius: 6px;
padding: 0 35px 0 15px;
transition: all 0.2s linear;
}
input:is(:focus, :valid){
border-color: #4070f4;
}
.input-box :is(label, i){
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #999;
transition: all 0.2s linear;
}
.input-box label{
left: 15px;
pointer-events: none;
font-size: 16px;
font-weight: 400;
}
input:is(:focus, :valid) ~ label{
color: #4070f4;
top: 0;
font-size: 12px;
font-weight: 500;
background-color: #fff;
}
.input-box i{
right: 15px;
cursor: pointer;
font-size: 20px;
}
input:is(:focus, :valid) ~ i{
color: #4070f4;
}
View a live demo by clicking “view live.” If you experience difficulty creating this Password Show-and-Hide Project or its code does not function as expected, feel free to download a copy of its source code from here free of charge.
Finally, a tutorial that makes form validation easy to understand! Your explanations were thorough yet easy to follow. I’ll definitely be referring back to this post in the future.
I’ve been looking for a tutorial like this for ages! Your step-by-step approach and code examples made it easy to grasp the concepts. Can’t wait to implement form validation in my projects.
This tutorial saved me so much time and frustration. I struggled with form validation until I found this post. Now I feel like a pro! Thank you for the clear instructions.