In this article, we will learn about how to toggle password visibility using HTML and Javascript. Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.
Approach: The following approach will be implemented to toggle visibility of the Password:
- We will display the use of two image icons “eye.png” and “eyeslash.png“
- Toggle these images using JavaScript.
- We will toggle the type of input field of password ( text -> password and password -> text )
Example: In this example, we will see the toggling the Password Visibility using HTML and JavaScript.
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<div class="col-sm-6">
<form method="post" class="form-group ">
Username
<input type="text" name="username"
autofocus="" autocapitalize="none"
autocomplete="username" required=""
id="id_username" class="form-control">
Password
<input type="password" name="password"
class="form-control"
autocomplete="current-password" required=""
id="id_password">
<img src=
width="1.8%" height="1%"
style="margin-left: -5%;display:inline;
vertical-align: middle"
id="togglePassword">
<button type="submit" class="btn btn-primary">
Login
</button>
</form>
</div>
</body>
<script>
const togglePassword =
document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');
togglePassword.addEventListener('click', function (e) {
// Toggle the type attribute
const type = password.getAttribute(
'type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// Toggle the eye slash icon
if (togglePassword.src.match(
togglePassword.src =
} else {
togglePassword.src =
}
});
</script>
</html>
|
Output:
toggle the Password field
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 May, 2023
Like Article
Save Article