How To Show or Hide Password Field Using Html, CSS And Js

by admin · Published August 31, 2019 · Updated September 1, 2019

Now I want to show or hide the password field using normal coding. Many submit form needed password box. So you type password, then you forget it. It’s very problematic. So you can click & see your password.

First create html form page index.html using below code. See how to create first index.html page.

Then insert below text into body tag.

<div class="container">
<div class="row"> 
<div class="col-md-8 col-md-offset-2">    
<div class="panel panel-default">     
<div class="panel-body">       
<form class="form-horizontal" method="" action="">        
     <div class="form-group">
            <label class="col-md-4 control-label">Email</label>            
        <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
        </div>
     </div>         
     <div class="form-group">
            <label class="col-md-4 control-label">Password</label>         
         <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
         </div>
     </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Second create style.css file and insert below lines and link from index.html file head section.

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}
.container{
  padding-top:50px;
  margin: auto;
}

Then add script.js file from head section using below method.

$(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

Now download all source code from below.

<!DOCTYPE html>
<html>
<head>
<title>Show hidden password </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<style>
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}
.container{
  padding-top:50px;
  margin: auto;
}
</style>

</head>
<body>
<div class="container">
<div class="row"> 
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">     
<div class="panel-body">        
<form class="form-horizontal" method="" action="">        
       <div class="form-group">
            <label class="col-md-4 control-label">Email</label>           
           <div class="col-md-6">
              <input type="email" class="form-control" name="email" value="">
           </div>
       </div>         
       <div class="form-group">
            <label class="col-md-4 control-label">Password</label>         
             <div class="col-md-6">
              <input id="password-field" type="password" class="form-control" name="password" value="secret">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>
       </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
<script>
$(".toggle-password").click(function() {

$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
</script>
</body>
</html>

How To Show or Hide Password Field Using Html, CSS And Js

Leave a Reply