Hey dear readers, Today in this blog you’ll learn how to create Login Form with showing password with the help of Html and CSS only in very easy way. Guys you can also watch video tutorial which showing given below, because this is a better way to learn that how to create a simple login form with showing password - step by step. And guys you knows very well that if there is password showing concept when a user click on "eye" type icon so, then javascript must allow to user to show his password that makes sure him what he is put to password section in actual. That's why i put a little bit js code inside HTML document as you can see in Html code section which is given below for working to show user password.

Watch Tutorial of How to create a Login Form with showing password in HTML and CSS

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
      <title>How to create a Login Form with showing password in HTML CSS</title>
    </head>
    <body>
      <div class="box">
        <a href="#"><i class="fas fa-user" id="user"></i></a>
        <p>login</p>
        <input type="text" placeholder="User name" name="">
        <input type="password"  id="eye" placeholder="Password">
        <button id="eyee" onclick="showpw();"><i class="fas fa-eye"></i></button>
        <button id="btn">Submit</button>
      </div>

      <!-- js code here -->
      <script type="text/javascript">
        function showpw(){
          var pw = document.getElementById('eye');
          if(pw.type = "text")
            pw.type == "password";
          else
            pw.type = "text";
        };
      </script>
    </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  body{
      background-color: #4c8bf5;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .box{
      display: inline-block;
      border-radius: 5px;
      background: black;
      height: 400px;
      width: 300px;
      text-align: center;
      line-height: 40px;
      transition: .5s;
      position: relative;
  }
  .box:hover{
      box-shadow: 1px 1px 10px 3px white;
  }
  #user{
      background: red;
      height: 90px;
      width: 90px;
      font-size: 38px;
      color: white;
      border-radius: 50px;
      line-height: 90px;
      margin-top: -90px;
  }
  p{
      font-family: sans-serif;
      color: white;
      font-weight: bold;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 2px;
  }
  p::after{
      content: '';
      display: block;
      margin-left: 40%;
      background: white;
      height: 4px;
      width: 20%;
      text-align: center;
      border-radius: 7px 7px 0px 0px;
  }
  input
  {
      height: 40px;
      margin-top: 40px;
      margin-bottom: 0px;
      width: 80%;
      color: white;
      font-size: 18px;
      outline: none;
      border: none;
      background: none;
      border-bottom: 1px solid #03f731;
      transition: all .4s ease;
  }
  input:focus{
      border-bottom: 4px solid #03f731;
  }
  #eyee{
      color: white;
      font-size: 15px;
      position: absolute;
      top: 229px;
      right: 40px;
      cursor: pointer;
      background: none;
      border: none;
      outline: none;
  }
  #btn{
      background: red;
      border: 2px solid white;
      font-size: 12px;
      margin-top: 50px;
      letter-spacing: 2px;
      color: white;
      padding: 5px 10px;
      outline: none;
      cursor: pointer;
      text-transform: uppercase;
      text-align: center;
  }
  #btn:active{
      background: white;
      color: black;
      transform: scale(1.1);
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files.

How to create a Login Form with showing password in HTML & CSS

Watch Tutorial of How to create a Login Form with showing password in HTML and CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding