Form, Login Form

Login form template in HTML CSS

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.

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.

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:

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

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.

<!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>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<span class="check-message hidden">Required</span>

</div>

<span class="check-message hidden">Required</span>

</div>

</span>

Remember me

</label>

<a href="#">Forgot Your Password</a>

</div>

<a href="#">Privacy Policy</a>

</div>

</form>

Don't have an Epic Games account?

</div>

$(".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.

*{
  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;
  }
}

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