Toggle Password Visibility Using JavaScript
By PATEL AAYUSH HARESHBHAIIn this article we will discuss how to add show password functionality in HTML form using JS.
Password Visibility using Javascript.
In this article we will see how we can toggle password so that the password is visible to the screen while toggling using the Javascript.It can be shown and hidden from the user by toggling its type using the type between text and password.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Toggle</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 350px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="email"],
input[type="password"] {
width: calc(100% - 16px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.checkbox {
margin-top: 10px;
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<div class="container">
<h2>Login Page</h2>
<label for="mail">Email</label>
<input type="email" name="email" id="mail"><br><br>
<label for="pwd">Password</label>
<input type="password" id="pwd"><br><br>
<input type="checkbox" class="checkbox" onclick="showpassword()">Show Password
<p>Click the checkbox to toggle between password visibility</p>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
function showpassword(){
let password=document.getElementById('pwd');
if(password.type=='password'){
password.type='text'
}else{
password.type='password'
}
}
Output :
When we checked the checkbox then the password will be visible
Leave a Reply