Welcome to codeswithpankaj.com! In this tutorial, we will create a simple “Show Password” toggle functionality using HTML, CSS, and JavaScript. This feature allows users to toggle the visibility of their password while typing, enhancing user experience in web forms.
Step 1: Create the HTML Structure
First, create the basic HTML structure for your form. This includes an input field for the password and a checkbox to toggle the visibility.
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Show Password Toggle</title>
</head>
<body>
<form>
<label for=“password”>Password:</label>
<input type=“password” id=“password” name=“password”>
<label for=“togglePassword”>Show Password</label>
<input type=“checkbox” id=“togglePassword”>
</form>
<script src=“script.js”></script>
</body>
</html>
Step 2: Add the JavaScript
Next, add the JavaScript code to handle the toggle functionality. This script listens for changes to the checkbox and toggles the type of the password input field accordingly.
var passwordInput = document.getElementById(“password“);
if (this.checked) {
passwordInput.type = “text“;
} else {
passwordInput.type = “password“;
}
});
Save this JavaScript code in a file named script.js.
Step 3: Style the Form (Optional)
You can add some basic CSS to style the form and make it look better. This step is optional but recommended for a better user experience.
form {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=“password”], input[type=“text”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
Final Code
Combine the HTML and CSS into a single file for simplicity, and include the JavaScript as an external file.
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Show Password Toggle</title>
<style>
form {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=“password”], input[type=“text”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<label for=“password”>Password:</label>
<input type=“password” id=“password” name=“password”>
<label for=“togglePassword”>Show Password</label>
<input type=“checkbox” id=“togglePassword”>
</form>
<script src=“script.js”></script>
</body>
</html>
Save this file as index.html and the JavaScript code as script.js. Open index.html in your web browser to see the “Show Password” toggle in action.
For more tutorials, visit codeswithpankaj.com
