Login form with password show hide toggle eye button using javascript
Hello, in this article, we will explore how to create a login form that includes a password show and hide eye button.
Providing a password show and hide button in a login form is essential for every modern website or web application.
In this tutorial, we will guide you through the complete process of creating a password show hide system and toggle the eye icon using a simple JavaScript function.
While we can implement this password show/hide functionality using both JavaScript and jQuery, JavaScript is currently the most popular and commonly used language for web development. Thus, we will first create a password show/hide button using JavaScript, and later, we will also demonstrate how to achieve the same functionality using jQuery.
When we fill out a form, we often come across a situation where we need to type a password, but we may want to see what we have entered. In this tutorial, we will provide a solution to this problem by creating a simple JavaScript function that can change the eye icon and make the password field more user-friendly.
Let's take a look at the basic steps involved in building a login form with a password show/hide button:
- Step 01: Create a login form with an input field of type password.
- Step 02: Write some CSS to style the form and the password field using bootstrap 5.
- Step 03: Write a JavaScript function that will toggle the password show/hide functionality.
Step 01: Create a login form with an input field of type password using bootstrap 5
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center m-0" style="height: 100vh;">
<div class="login_oueter">
<div class="col-md-12 logo_outer">
<img src="https://abdultechhub.com/front_assets/image/abdultechhub_logo.png">
</div>
<form action="" method="post" id="login" autocomplete="off" class="bg-light border p-3">
<div class="form-row">
<h4 class="title my-3">Login For Access</h4>
<div class="col-12">
<div class="input-group mb-3">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" >
</div>
</div>
<div class="col-12">
<div class="input-group mb-3">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input name="password" type="password" value="" class="form-control" id="password" placeholder="password" required="true" >
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group form-check text-left">
<input type="checkbox" name="remember" class="form-check-input" id="remember_me" />
<label class="form-check-label" for="remember_me">Remember me</label>
</div>
</div>
<div class="col-sm-12 pt-3 text-right">
<p>Already registered <a href="#">Register</a></p>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit" name="signin">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
Step 02: Write some CSS to style the form and the password field
Now we will also write some custom CSS to ensure that the form appears centered and has a better visual appearance.
.login_oueter {
width: 360px;
max-width: 100%;
}
.logo_outer{
text-align: center;
}
.logo_outer img{
width:120px;
margin-bottom: 40px;
}
form#login {
box-shadow: 5px 5px 0px rgb(89 77 251 / 39%);
}
Step 03: Write a JavaScript function that will toggle the password show/hide functionality
function password_show_hide() {
var x = document.getElementById("password");
var show_eye = document.getElementById("show_eye");
var hide_eye = document.getElementById("hide_eye");
hide_eye.classList.remove("d-none");
if (x.type === "password") {
x.type = "text";
show_eye.style.display = "none";
hide_eye.style.display = "block";
} else {
x.type = "password";
show_eye.style.display = "block";
hide_eye.style.display = "none";
}
}
Great! You have completed the basic steps to create a login form with a password show/hide button using JavaScript.
Next, we will show you how to implement the same password show/hide functionality using jQuery. However, it's important to note that you will need to include the jQuery CDN in your code to use jQuery.
$(document).ready(function() {
$('#show_password').click(function() {
var passwordField = $('#password');
var passwordFieldType = passwordField.attr('type');
if (passwordFieldType === 'password') {
passwordField.attr('type', 'text');
$(this).html('<i class="fa fa-eye-slash"></i>');
} else {
passwordField.attr('type', 'password');
$(this).html('<i class="fa fa-eye"></i>');
}
});
});
