Cool Login Form in HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Cool Login Form with Password Show or Hide Option in HTML CSS & JavaScript. Earlier I have shared a Neumorphism Login Login Form but there is no password show hide option. Now, it's a time to create Login Form with password show or hide Button.

A Login form is used to enter the authentication credentials of the user to access a restricted page or form. The login form includes a field for the username and another for the password.

This Login Form is created only for design purposes. There is no action when you submitted form after entered credential details (Email & password). There is no backend integration because I used only HTML & CSS to create this form. So there is no backend role in this form.

If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Cool Login Form).

Video Tutorial of Cool Login Form in HTML & CSS

If you like this program (Cool Login Form) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You can use this form in your websites, projects, and anywhere you want. If you're a beginner and this video helped you to understand the codes behind creating a login form, then don't forget to share it with your friends. You can also create this type of login form if you have basic knowledge of HTML & CSS.

Login Form Design in HTML & CSS [Source Codes]

As always, before sharing the codes this program (Cool Login Form). Let's a few talk about the main tags and codes of this program. In the HTML File, First I created a <div> with the class name "center" and placed all other elements inside it. Then I created a <form> tag. Then I created two tags inside it (<input> tag and <i> tag). Inside <i> tag I used font awesome class name for icon. After that, I paste these two tags <input> and <i> tag two times to creating the password field and lock icon. At last, I created last <input> type submit tag.

In the CSS File, First I removed default margins and padding of the body. Then I created a radial gradient background in the body. The radial-gradient() CSS function generates an image consisting of a continuous transition between two or more colors that reflect from an origin. Its shape may be a circle or an oval. Then I did essential styling to the login form, input field, icons, and the button.

In the JavaScript File, First I call required tags using CSS selector. Then I create a click function and inside this function, I have written if-else condition. Inside this condition, I have written if the user clicks on that button and the password formate is the default (bullet) then change this formate to text formate otherwise don't do anything.

To create this program (Cool Login Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.

You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en">
<head>
 <meta charset="UTF-8">
 <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
 <!-- <title>Login Form</title> -->
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
 <div class="center">
 <div class="header">
Login Form</div>
<form>
  <input type="text" placeholder="Email or Username">
  <i class="far fa-envelope"></i>
  <input id="pswrd" type="password" placeholder="Password">
  <i class="fas fa-lock" onclick="show()"></i>
  <input type="submit" value="Sign in">
  <a href="#">Forgot Password?</a>
 </form>
</div>
<script>
  function show(){
   var pswrd = document.getElementById('pswrd');
   var icon = document.querySelector('.fas');
   if (pswrd.type === "password") {
    pswrd.type = "text";
    pswrd.style.marginTop = "20px";
    icon.style.color = "#7f2092";
   }else{
    pswrd.type = "password";
    icon.style.color = "grey";
   }
  }
 </script>
 
</body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
 margin: 0;
 padding: 0;
 background: radial-gradient(#a429bc,#9225a7,#7f2092);
 height: 100vh;
 overflow: hidden;
 font-family: 'Noto Sans TC', sans-serif;
}
.center{
 width: 430px;
 margin: 130px auto;
 position: relative;
}
.center .header{
 font-size: 28px;
 font-weight: bold;
 color: white;
 padding: 25px 0 30px 25px;
 background: #5c1769;
 border-bottom: 1px solid #370e3f;
 border-radius: 5px 5px 0 0;
}
.center form{
 position: absolute;
 background: white;
 width: 100%;
 padding: 50px 10px 0 30px;
 box-sizing: border-box;
 border: 1px solid #6d1c7d;
 border-radius: 0 0 5px 5px;
}
form input{
 height: 50px;
 width: 90%;
 padding: 0 10px;
 border-radius: 3px;
 border: 1px solid silver;
 font-size: 18px;
 outline: none;
}
form input[type="password"]{
 margin-top: 20px;
}
form i{
 position: absolute;
 font-size: 25px;
 color: grey;
 margin: 15px 0 0 -45px;
}
i.fa-lock{
 margin-top: 35px;
}
form input[type="submit"]{
 margin-top: 40px;
 margin-bottom: 40px;
 width: 130px;
 height: 45px;
 color: white;
 cursor: pointer;
 line-height: 45px;
 border-radius: 45px;
 border-radius: 5px;
 background: #5c1769;
}
form input[type="submit"]:hover{
 background: #491254;
 transition: .5s;
}
form a{
 text-decoration: none;
 font-size: 18px;
 color: #7f2092;
 padding: 0 0 0 20px;
}

Video Tutorial of Cool Login Form in HTML & CSS

You might like this:

Login Form Design in HTML & CSS [Source Codes]

Thanks for visiting, Keep visiting.

7 Comments

Post a Comment

About Us

Contact Form