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.
<!DOCTYPE html>
<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.
document.getElementById("togglePassword").addEventListener("change", function() {
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.
<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>
Final Code
Combine the HTML and CSS into a single file for simplicity, and include the JavaScript as an external file.
<!DOCTYPE html>
<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
Top comments (1)
You should set
spellcheck=falseon the password field. While most (but not all) browsers have disabled spellcheck on the password field (since it makes no sense), when you change the input type to text the password could be sent to a server over the network. Also autocorrect, autocapitalize should be disabled. Some references for spellcheck:schneier.com/blog/archives/2022/09...
bitdefender.com/blog/hotforsecurit...
Edit: removed autocomplete from the list of disabled attributes. It may be needed on some browsers to make autofill of passwords (from saved credentials) work.