How to show-hide password

Tech Area
June 6, 2024

In this tutorial, We will learn how to show hide password in html login form.

Files used in this tutorial:

1- index.php (login form with show-hide toggle button)

This screenshot shows the login form with show-hide toggle button.

index.php

<html>  
<head>  
    <title>Login Form</title>  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
</style>
<body>  
    <div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Login Form</h3>
     <div class="box">
      <form>
      <div class="form-group">
       <b><label for="email">Emailid</label></b>
       <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control" required/>
      </div>
      <div class="form-group">
       <b><label for="password">Password</label></b>
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password" class="form-control" required data-toggle="password"/>
      </div>
      <div class="form-group">
       <input type="submit" id="login" name="login" value="Login" class="btn btn-success" />
      </div>
      </form>
     </div>
   </div>  
  </div>
 </body>  
</html>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/bootstrap-show-password@1.3.0/dist/bootstrap-show-password.min.js"></script>

Image upload and cropped using jQuery AJAX in PHP

How to show and hide password using JavaScript

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024

Online Pizza Delivery project in PHP Last Updated: February 4, 2024