The used languages for this development are Html, CSS and JavaScript. In the last post, we created a Signup form HTML, CSS and JS.
A login form is usually used by websites and applications.
Responsive login form:
Let’s discuss something about this login form and what’s there in this form. It has a heading at the top by the name of “Login”.
Then it has two fields. A field is used for input. The first field is created for entering the name of the user. It has used placeholder functionality in it. It has also an icon of the user which looks cool. After clicking on this it removes from there and asked to enter the name.
Below it, it has a password field. It has a placeholder and icon of security. After that, it has a text of forgot password with a hover effect. Then it has a login button. It has a hover effect and gradient color which starts moving after pointing at the button.
These buttons have also a hover effect. Signup works when we don’t have an account on that website. Then we can create an account, otherwise, we don’t need to create an account. We just need to log in to our account through this form.
You might like it:
How to create a Responsive login form?
Follow the below steps to develop a Responsive login form.
Source code of Html:
Create an Html file with the extension of .html and save it. Html is used for creating these fields so that we can create a form. It is also used for all the content and button.
<!--fantacyDesigns-->
<!--fantacydesigns.com-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>FantacyDesigns | Login Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-49">
Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Username is reauired">
<span class="label-input100">Username</span>
<input class="input100" type="text" name="username" placeholder="Type your username">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<span class="label-input100">Password</span>
<input class="input100" type="password" name="pass" placeholder="Type your password">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="text-right p-t-8 p-b-31">
<a href="#">
Forgot password?
</a>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Sign Up Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="login100-social-item bg2">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="login100-social-item bg3">
<i class="fa fa-google"></i>
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/animsition/js/animsition.min.js"></script>
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/select2/select2.min.js"></script>
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<script src="vendor/countdowntime/countdowntime.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Source code of CSS:
/*[ FONT ]*/
@font-face {
font-family: Poppins-Regular;
src: url('../fonts/poppins/Poppins-Regular.ttf');
}
@font-face {
font-family: Poppins-Medium;
src: url('../fonts/poppins/Poppins-Medium.ttf');
}
@font-face {
font-family: Poppins-Bold;
src: url('../fonts/poppins/Poppins-Bold.ttf');
}
@font-face {
font-family: Poppins-SemiBold;
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}
/*[ RESTYLE TAG ]*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*---------------------------------------------*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #a64bf4;
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}
textarea::-webkit-input-placeholder { color: #adadad;}
textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
/*[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.5;
color: #666666;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.5;
color: #333333;
text-transform: uppercase;
}
.bg1 {background-color: #3b5998}
.bg2 {background-color: #1da1f2}
.bg3 {background-color: #ea4335}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
width: 100%;
margin: 0 auto;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.wrap-login100 {
width: 450px;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
/*------------------------------------------------------------------
[ Form ]*/
.login100-form {
width: 100%;
height: 550px;
}
.login100-form-title {
display: block;
font-family: Poppins-Bold;
font-size: 39px;
color: #56CCF2;
line-height: 1.2;
text-align: center;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #d9d9d9;
}
.label-input100 {
font-family: Poppins-Regular;
font-size: 14px;
color: #333333;
line-height: 1.5;
padding-left: 7px;
}
.input100 {
font-family: Poppins-Medium;
font-size: 16px;
color: #333333;
line-height: 1.2;
display: block;
width: 100%;
height: 55px;
background: transparent;
padding: 0 7px 0 43px;
}
/*---------------------------------------------*/
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::after {
content: attr(data-symbol);
font-family: Material-Design-Iconic-Font;
color: #adadad;
font-size: 22px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
height: calc(100% - 20px);
bottom: 0;
left: 0;
padding-left: 13px;
padding-top: 3px;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #7f7f7f;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
.input100:focus + .focus-input100::after {
color: #a64bf4;
}
.has-val.input100 + .focus-input100::after {
color: #a64bf4;
}
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.wrap-login100-form-btn {
width: 100%;
display: block;
position: relative;
z-index: 1;
border-radius: 25px;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
-moz-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
-webkit-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
-o-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
-ms-box-shadow: 0 5px 30px 0px rgba(3, 216, 222, 0.2);
}
.login100-form-bgbtn {
position: absolute;
z-index: -1;
width: 300%;
height: 100%;
background: #a64bf4;
background: -webkit-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
background: -o-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff);
top: 0;
left: -100%;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.login100-form-btn {
font-family: Poppins-Medium;
font-size: 16px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
width: 100%;
height: 50px;
}
.wrap-login100-form-btn:hover .login100-form-bgbtn {
left: 0;
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
padding: 4px 25px 4px 10px;
bottom: calc((100% - 20px) / 2);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
right: 2px;
pointer-events: none;
font-family: Poppins-Regular;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 16px;
bottom: calc((100% - 20px) / 2);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
right: 8px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
/*//////////////////////////////////////////////////////////////////
[ Social item ]*/
.login100-social-item {
font-size: 25px;
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
}
.login100-social-item:hover {
color: #fff;
background-color: #333333;
}
/*//////////////////////////////////////////////////////////////////
[ Responsive ]*/
@media (max-width: 576px) {
.wrap-login100 {
padding-left: 15px;
padding-right: 15px;
}
}
Source code of javascript:
It is a dynamic language used for adding functionality to all the web pages and making them dynamic. Create a javascript file in the editor with the extension of .js and save it in the same folder as other files.
(function ($) {
"use strict";
/*==================================================================
[ Focus input ]*/
$('.input100').each(function(){
$(this).on('blur', function(){
if($(this).val().trim() != "") {
$(this).addClass('has-val');
}
else {
$(this).removeClass('has-val');
}
})
})
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);Download it from the below button and then extract it. Then run the main file.
Like, comment and share.
Thanks for reading it.
