Welcome, friends! This comprehensive guide will teach you how to implement a Show & Hide Password feature using HTML, CSS, and JavaScript. This functionality is crucial for improving user experience and providing better control over password visibility in login forms.
Why You Need a Show & Hide Password Feature
The Show & Hide Password feature allows users to toggle between masked and visible passwords. It’s a simple but effective way to prevent login errors while enhancing the user experience by enabling users to double-check their passwords.
Step-by-Step Guide: Adding Show & Hide Password
Let’s jump straight into how to create the Show & Hide Password feature in your forms.
1. HTML Structure for Show & Hide Password
The first step is to create the basic HTML structure. Here’s a simple code snippet for a password input field with a toggle button:
<!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>
</body>
</html>
This basic structure includes a password input field and a button that will toggle the password visibility.
2. CSS Styling for the Show & Hide Password Feature
Once your HTML is set, apply CSS styling to make the form visually appealing. You can modify the styles to fit the theme of your website:
/* 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;
}
This styling ensures the password field and button are correctly aligned and responsive across different screen sizes.
3. JavaScript to Toggle Password Visibility
Now, let’s add the JavaScript code that will toggle between showing and hiding the password. This script listens for a button click event and toggles the password input between the “text” and “password” types.
<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>
This JavaScript allows users to toggle the password’s visibility with a simple click, making it user-friendly and interactive.
Want to Check Username Availability on Social Media?If you’re looking to check username availability on various social media platforms, visit NameChkr to find out!
Read Also
Read Also
- Glassmorphism Login Form in HTML and CSS
Explore the stylish world of glassmorphism as you create a modern login form using HTML and CSS. This guide breaks down the design process step by step. - Toggle Button using HTML, CSS, and JavaScript
Discover how to enhance user interaction by creating a sleek toggle button with HTML, CSS, and JavaScript. This tutorial covers everything from structure to styling. - Responsive Cards in HTML and CSS
Learn how to design eye-catching responsive cards that adapt seamlessly to any device. This guide offers practical tips for achieving stunning layouts. - Build a Google Gemini Chatbot Using HTML, CSS, and JS
Dive into chatbot development by creating a Google Gemini chatbot with HTML, CSS, and JavaScript. This tutorial will help you understand the basics of interactive forms.
Final Words on Show & Hide Password Feature
Incorporating a Show & Hide Password feature is an easy way to enhance the security and usability of your login forms. You can create this proper functionality with HTML, CSS, and JavaScript in just a few steps.
If you encounter any challenges, download the source code below or view a live demo to see how it works in real time.
Comments
How to Create Responsive Cards in HTML and CSS
How to Implement Show & Hide Password Feature in HTML, CSS & JavaScript (2024)
Responsive Login & Registration Form in HTML & CSS | Free Code
How to Create Responsive Cards in HTML and CSS
Ultimate Overview of Creating a Stunning Login and Registration Form