Skip to content
  • Home
  • Blog
  • Html & Css

    Top Categories

    Header & Footer
    Naviation Bar
    Unique Menu
    Card Designs
    Sections
    Animations
    Animated Buttons
    Landing Pages
    Sliders

    HTML Forms

    Login Form
    Sign up / Registration Form
    Contact Form

    Languages

    HTML
    CSS
    JAVASCRIPT
    PHP
    Avalible soon
  • Css Shadows
  • Color Picker
  • Write for us
WhatsApp Image 2022-11-09 at 1.57.47 AM
Search
Close
  • Form, Login Form

Login form template in HTML CSS

  • admin
  • October 13, 2021
Gaming login form

Hello everyone, today we are going to create a Login form template with a lot of different options and features. In the last post, we created a Cool button hover effects. In this post, our motive is to develop a responsive login form for our website using Html and CSS. So, let’s get started.

Login form template:

If you have not created your account on the website then you have to use a registration or signup form to create an account. It is used by almost all those companies which are selling their services online.

As you can see in the image we have a beautiful login form with an awesome background. Then it has a box that has all the content of the form. This box has soft borders. At the top, it has a logo of the website or company. Then it has different options of Google, Facebook, etc through which you can sign in to your account by using the number or email of your account.

Login form content:

Fields are basically created using the <input> tag and it allows the users to enter the data in the form fields. We have two fields username and password.

When you check this box then it will save your password into the browser and next time when you try to log in to your account.

At last, we have a log-in button, and it login the users when they enter the right information into the website login form. Below this, we have different options and sign-up options as well. It will redirect the users to the signup form and they will be able to create a new account by entering their information.

You might like it:

  • Html login form template free download
  • Sliding login and registration form
  • login form validation

How to create a responsive login form template?

Follow the below steps. These steps will help you to build a beautiful login form.

Download the code editor.

Below given editors are useful.

VS CODE

Sublime text editor

Source code of Html for login form template:

Html is used in this form to create and write the content of the form. Code is mentioned below and used in your editor. So, copy the code by clicking on the copy button.

Html Code
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="login-form">
      <div class="logo"><img src="images/logo.png" alt=""></div>
 
      <div class="social-media">
        <button class="fb"><img src="images/fb.png" alt=""></button>
        <button class="google"><img src="images/google.png" alt=""></button>
        <button class="ps"><img src="images/ps.png" alt=""></button>
        <button class="xbox"><img src="images/xbox.png" alt=""></button>
        <button class="switch"><img src="images/switch.png" alt=""></button>
      </div>
 
      <h6>Sign In</h6>
 
      <form action="">
        <div class="textbox">
          <input type="text" placeholder="Username Or Email">
          <span class="check-message hidden">Required</span>
        </div>
 
        <div class="textbox">
          <input type="password" placeholder="Password">
          <span class="check-message hidden">Required</span>
        </div>
 
        <div class="options">
          <label class="remember-me">
            <span class="checkbox">
              <input type="checkbox">
              <span class="checked"></span>
            </span>
            Remember me
          </label>
 
          <a href="#">Forgot Your Password</a>
        </div>
 
        <input type="submit" value="Log In Now" class="login-btn" disabled>
        <div class="privacy-link">
          <a href="#">Privacy Policy</a>
        </div>
      </form>
 
      <div class="dont-have-account">
        Don't have an Epic Games account?
        <a href="#">Sign Up</a>
      </div>
    </div>
 
    <script type="text/javascript">
      $(".textbox input").focusout(function(){
        if($(this).val() == ""){
          $(this).siblings().removeClass("hidden");
          $(this).css("background","#554343");
        }else{
          $(this).siblings().addClass("hidden");
          $(this).css("background","#484848");
        }
      });
 
      $(".textbox input").keyup(function(){
        var inputs = $(".textbox input");
        if(inputs[0].value != "" && inputs[1].value){
          $(".login-btn").attr("disabled",false);
          $(".login-btn").addClass("active");
        }else{
          $(".login-btn").attr("disabled",true);
          $(".login-btn").removeClass("active");
        }
      });
    </script>
  </body>
</html>

Source code of CSS:

CSS is used to design the login form and make it a responsive login form on all devices. Its code is also mentioned below. So, paste it into your editor.

Css Code
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "hind",sans-serif;
  text-decoration: none;
}
 
body{
  background: #121212;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.login-form{
  width: 470px;
  background: #202020;
  padding: 30px 60px;
}
 
.logo{
  height: 50px;
  text-align: center;
}
 
.logo img{
  height: 50px;
}
 
.social-media{
  display: flex;
  margin: 30px 0;
}
 
.social-media button{
  height: 50px;
  width: 100px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: .3s linear;
}
 
.social-media button:last-child{
  margin: 0;
}
 
.social-media button img{
  width: 20px;
}
 
.fb{
  background: #4267b2;
}
 
.google{
  background: #fff;
}
 
.ps{
  background: #02b3e8;
}
 
.xbox{
  background: #107c10;
}
 
.switch{
  background: #e60012;
}
 
.social-media button:hover {
  opacity: .7;
}
 
.login-form h6{
  color: #f1f1f1;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
}
 
.textbox{
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: 15px;
}
 
.textbox input{
  width: 100%;
  height: 50px;
  border: none;
  background: #2b2b2b;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  color: #f4f4f4;
}
 
.textbox input:focus{
  background: #484848 !important;
}
 
.check-message{
  position: absolute;
  top: 50%;
  right: 10px;
  color: #fff;
  text-transform: uppercase;
  transform: translateY(-50%);
}
 
.textbox input:focus + .check-message{
  display: none;
}
 
.options{
  margin-top: 15px;
  color: #f4f4f480;
  overflow: hidden;
  font-size: 14px;
}
 
.remember-me{
  float: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}
 
.checkbox{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #484848;
  margin-right: 15px;
  position: relative;
}
 
.checkbox input{
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
 
.checked{
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  display: none;
}
 
.checkbox input:checked + .checked{
  display: block;
}
 
.options a{
  color: #f4f4f480;
  font-size: 14px;
  float: right;
}
 
.login-btn{
  width: 100%;
  height: 50px;
  margin-top: 30px;
  background: #191919;
  border: none;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  transition: .3s linear;
}
 
.login-btn.active{
  background: #037bee;
  color: #fff;
}
 
.login-btn.active:hover{
  opacity: .7;
}
 
.hidden{
  display: none;
}
 
.privacy-link{
  text-align: center;
  margin-top: 35px;
}
 
.privacy-link a{
  color: #f1f1f1;
  font-size: 14px;
}
 
.dont-have-account{
  font-size: 14px;
  text-align: center;
  color: #f4f4f480;
  margin: 20px 0;
}
 
.dont-have-account a{
  color: #f1f1f1;
}
 
@media screen and (max-width:470px) {
  body{
    background: #202020;
  }
 
  .login-form{
    width: 100%;
    padding: 0 15px;
  }
}

Download source code:

If you are unable to copy and then paste this code into your device then we have created a solution for that. You don’t have any need to create files or connect files with each other. Just run the main file of HTML and the result will be on your browser.

Task:

We have added multiple things to this login form. Change and modify these things in this login form. Add a logo of the website at the top. Then add input fields below this logo. Below remember me button, add the icons of Google, Facebook, and Twitter. In this way, your login form will be modified and will look cool.

I hope it was an awesome design and you like this design. So, if you like it then don’t forget to like and follow us because it motivates us to create such beautiful content for our followers.

Thanks for reading this article.

Download Source Code
PrevPreviousCool button hover effects CSS with source code
NextBusiness card in Html and CSS with source codeNext
Latest Post
How Analytics Inform User-Centric Web Design

How Analytics Inform User-Centric Web Design

The Impact of Machine Learning on Web Development

The Impact of Machine Learning on Web Development

Color Psychology in Landing Page Design: Choosing Palettes that Elicit Action and Emotion

Color Psychology in Landing Page Design: Choosing Palettes that Elicit Action and Emotion

The Power of Microinteractions: Enhancing User Engagement Through Small Gestures

The Power of Microinteractions: Enhancing User Engagement Through Small Gestures

The Importance of User Experience (UX) Design in Web Development

The Importance of User Experience (UX) Design in Web Development

Beginner’s Guide to Responsive Web Design

Beginner’s Guide to Responsive Web Design

Categories
Animations 25
Buttons animation 8
Calculator 1
Card Design 19
Contact Forms 10
Design 19

Leave a Comment Cancel reply

Related Post
How to Improve Website Performance with Optimized HTML, CSS, and JavaScript
Html and CSS

How to Improve Website Performance with Optimized HTML, CSS, and JavaScript

HTML, CSS, and JavaScript: A Dynamic Trio for Creating Responsive Websites
Html and CSS JavaScript

HTML, CSS, and JavaScript: A Dynamic Trio for Creating Responsive Websites

New Website Preloader with source code
Design

New Website Preloader with source code

About Us

Fantacy Designs  Provides Premium Html  Css and JS Designs with source code for free. 

Categories

  • Html
  • Css
  • JavaScript
  • Web Design

Quick Links

  • Contact Us
  • Write For Us
  • Privacy Policy
  • Terms and Conditions

Contact Info

  • fantacydesignss@gmail.com
  • +92333000000
  • Mansehra, Pakistan

Subscribe, For Weekly Updates

Copyright 2025 - FantacyDesigns - All Rights Reserved