Login form with password show and hide button using JavaScript

Updated on ... 11th April 2023

Hello, friends in this article we will discuss How to create a login form with a password show and hide option. Here is the quick solution to build a password show and hide button in the login form using a simple JavaScript function. Every modern website or web application provides a login functionality. So, it is necessary to add a password show hide button inside the login form password field. and in this tutorial, we will also change the eye icon through function, so that it makes a user-friendly UI.

In this tutorial, we walk through the complete process of creating a password show hide system and toggle eye icon using a simple JavaScript function. we can also create it using jquery in a few lines of code but know a day's JavaScript is the most popular language and first browsing language. So that we will create a password show hide button using JS.

When we filling up a form, then we face a situation where we type the password and we want to see that what I have entered. if you wandering to find that solution then you are in the right place.

BASIC STEP TO DO THAT

Let's have a look. Here are basic simple steps that help you to build a login form with a password show and button.

Step 01: Create a login form with the input field which has type password

Step 02: Write some CSS to style them

Step 03: Finally write JS function to toggle the password show hide

Tree directory structure script With PHP

Step 01: create a login form with the input field which has type password

                                                
                                                
                                                <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

<!-- font awesome  -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />


<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://bootstrapfriendly.com/static/images/bootstrapfriendly_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">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
              </div>
              <input name="username" type="text" value="" class="input form-control" id="username" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
            </div>
          </div>
          <div class="col-12">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1"><i class="fas fa-lock"></i></span>
              </div>
              <input name="password" type="password" value="" class="input form-control" id="password" placeholder="password" required="true" aria-label="password" aria-describedby="basic-addon1" />
              <div class="input-group-append">
                <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 them

Here we are using bootstrap for basic styling and making our form responsive, and I am going to write some custom styling so that that form will appear in the middle and will look better

                                                
                                                
                                                .login_oueter {
    width: 360px;
    max-width: 100%;
}
.logo_outer{
    text-align: center;
}
.logo_outer img{
    width:120px;
    margin-bottom: 40px;
}

Step 03: finally write js function to toggle the password show hide

                                                
                                                
                                                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";
  }
}