How to Create Login and Registration Form in HTML
 |
| Beautiful LogIn Form in HTML CSS & JavaScript |
HTML Login Form is one of those creations which beginners create most in learning web design. And the Login Form Design is one of the first looks of Website or Web Application. Like Facebook, Gmail, etc all have a Login Form in the first look.
And, today we'll Create a Login Form with the help of HTML, CSS3, and JavaScript with a Cool Animation. So, welcome to the website CodingTuting with Jignesh Panchal. Friends, I hope you like our last beautiful creation on Count Your Characters.
Let's move ahead to today's creation.
How to Create CSS Responsive Login Form ?
It's so easy to create friends. Just you've good knowledge of HTML, CSS, and JavaScript. I'm not asking about a strong knowledge. But your basic knowledge is important for this kind of creation.
Many Login Forms are available on the internet, but many of them are not responsive. And you know that - I always focus on responsive design. So our this CSS Login Form Template is fully responsive.
Preview of CSS Login form Design
You may also like
Focus on the source code
As you know, I always give a summary of the source code before share it. See How I did this? Don't be hurry for source code.
I'm using Google Fonts in my code. You can use it too or any others as you like.
- First I created a button and a basic design of form in HTML and gave descriptive class names and ID to the elements for CSS and JavaScript.
- I decore the form using CSS. Also, I gave a shake effect to the login form call button.
- For Zoom-in and Zoom-out animation - I gave three CSS which are visibility, opacity, and transition.
- For switching between Login Form and SignUp Form - I gave CSS height: 0, overflow: hidden
- Al last I created some JavaScript functions. I used these functions to control the effects Zoom-in, Zoom-out, and Form Switching.
Above is the summary of the source code. I hope you got it. Now focus on the full source code. Copy this code, run it and try to understand briefly.
LoginForm.html
<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Gothic:700|Raleway&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="StyleLoginForm.css"/>
</head>
<body>
<div class="row">
<div id="callLogin">
<button class="" type="button" aria-placeholder="Click Here to Login and SignUp">
<i class="far fa-user"></i> My Account
</button>
</div>
<form id="AccForm">
<div class="m5 login-panel" id="test">
<span id="close"><i class="fas fa-times"></i></span>
<ul>
<li>
<div class="single-signin">
<button type="button" title="SignUp with Google">
<span><i class="fab fa-google"></i></span>
<span id="accGoogle">LogIn with Google</span>
</button>
<button type="button" title="SignUp with Google">
<span><i class="fab fa-facebook-f"></i></span>
<span id="accFacebook">LogIn with Facebook</span>
</button>
<button type="button" title="SignUp with Google" onclick="formChange()">
<span><i id="accIcon" class="fas fa-user-plus"></i></span>
<span id="logSignBtn">SignUp</span>
</button>
</div>
</li>
<li>
<div class="signup-form" id="newUser">
<div class="header">
<div class="welcome">SignUp</div>
<div class="subtitle">Create your Account and Connect with Us.</div>
</div>
<form class="form-content">
<div class="input-field">
<input type="email" id="emailId" required="required" class="txtField" placeholder=" E-Mail ID"/>
<span class="underLine"></span>
</div>
<div class="input-field">
<input type="password" required="required" class="txtField" placeholder=" Password"/>
<span class="underLine"></span>
</div>
<div class="input-field">
<input type="password" required="required" class="txtField" placeholder=" Confirm Password"/>
<span class="underLine"></span>
</div>
<div class="form-footer">
<button class="submit-btn" type="button">SignUp</button>
</div>
</form>
</div>
<div class="login-form">
<div class="header">
<div class="welcome">Welcome Back</div>
<div class="subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<form class="form-content">
<div class="input-field">
<input type="text" id="userName" required="required" class="txtField" placeholder=" Username"/>
<span class="underLine"></span>
</div>
<div class="input-field">
<input type="password" required="required" class="txtField" placeholder=" Password"/>
<span class="underLine"></span>
</div>
<div class="form-footer">
<button class="submit-btn" type="button">LogIn</button>
<a href="" title="Forgot Password ?">Forgot Password ?</a>
</div>
</form>
</div>
</li>
</ul>
</div>
</form>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="ScriptLoginForm.js"></script>
</body>
</html>StyleLoginForm.css
/*Code by CodingTuting.Com Jignesh Panchal*/
body {
margin:0;
background-color: #7f9ead;
}
#callLogin {
text-align: center;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#AccForm {
visibility: hidden;
opacity: 0;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
#callLogin button {
margin-top: 20px;;
padding: 10px 23px;
font-size: 15px;
background-image: linear-gradient(to bottom right, #ff3729, #b122ca);
color:#fff;
outline: none;
border:1px solid transparent;
border-radius: 20px;
font-family: roboto;
font-weight: 400;
cursor: pointer;
-webkit-box-shadow: 20px 20px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 20px 20px 17px 0px rgba(0,0,0,0.75);
-o-box-shadow: 20px 20px 17px 0px rgba(0,0,0,0.75);
box-shadow: 20px 20px 17px 0px rgba(0,0,0,0.75);
}
#callLogin button:hover, #callLogin button:focus {
-webkit-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-moz-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-o-animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.login-panel {
width: 40%;
margin-left: auto;
margin-right: auto;
position: relative;
-webkit-box-shadow: 0px 5px 12px 10px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 12px 10px rgba(0,0,0,0.75);
-o-box-shadow: 0px 5px 12px 10px rgba(0,0,0,0.75);
box-shadow: 0px 5px 12px 10px rgba(0,0,0,0.75);
}
.login-panel #close {
position: absolute;
right: 0;
padding: 10px 20px 0;
display: block;
color: #e6305c;
font-size: 22px;
cursor: pointer;
z-index: 999;
}
.login-panel .single-signin {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to bottom right, #ff3729, #b122ca);
flex-direction: column;
width: 46%;
height: 100%;
top: 0;
}
.login-panel .single-signin button {
font-size: 15px;
padding: 10px 13px 10px 0px;
width: 85%;
margin: 10px 0px;
background: transparent;
border-radius: 20px;
border:1px solid #ff9ed8;
color:#fff;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.login-panel .single-signin button:hover,
.login-panel .single-signin button:focus {
background: #fff1f7;
color: #da2d76;
border-color: transparent;
}
.login-panel .single-signin button span i {
padding: 0 10px;
font-size: 20px;
}
.login-panel ul {
padding: 0;
position: relative;
overflow: hidden;
background-color: #fff;
}
.login-panel ul li {
display: inline-block;
list-style-type: none;
}
.login-panel ul li:nth-child(1) {
width:45%;
}
.login-panel ul li:nth-child(2) {
width:54%;
margin-top: 30px;
}
.login-form {
padding:5px 25px 15px;
margin-left: 2px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-o-transition-delay:.2s;
transition-delay:.2s;
}
.login-form .header, .signup-form .header {
text-align: center;
font-family: roboto;
font-weight: 300;
margin: 0px 0 30px;
color: #da2d76;
}
.login-form .header .welcome,.signup-form .header .welcome {
font-size: 2.5rem;
letter-spacing: 0.05rem;
}
.input-field {
margin-bottom: 15px;
position: relative;
}
.input-field span.underLine {
background-image: linear-gradient(to right, #ff3729, #b122ca);
width: 0;
height: 2px;
position: absolute;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.txtField {
display: block;
padding: 12px 0 12px;
font-size: 18px;
width: 100%;
background: transparent;
outline: none;
border: none;
color: #cf2a8d;
font-family:'Raleway', sans-serif, 'FontAwesome';
}
.txtField::placeholder {
color: #cf2a8d;
}
.txtField:focus ~ span.underLine {
width: 100%;
}
.form-footer {
padding: 10px 0 15px;
font-family: roboto;
}
.form-footer button {
display: block;
margin-bottom: 30px;
padding: 10px 30px;
border-radius: 20px;
outline: none;
background: transparent;
border: 1px solid #cf2a8d;
color: #cf2a8d;
font-size: 17px;
cursor: pointer;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .3s ease-in;
}
.form-footer button:focus, .form-footer button:hover {
background: #dd2e6f;
border-color: transparent;
color:#fff;
}
.form-footer a {
text-decoration: none;
color: #b824ba;
}
.form-footer a:focus {
border-color:red;
}
.signup-form {
padding:5px 25px 15px;
margin-left: 2px;
position: absolute;
height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.signup-form.active {
position: absolute;
background: #fff;
height: 100%;
visibility: visible;
opacity: 1;
}
.signup-form .header {
margin-top: 0px;
}
.signup-form.active ~ .login-form {
opacity: 0;
visibility: hidden;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
/* Media Queries */
@media only screen and (max-device-width: 1024px) {
.login-panel {
width: 55%;
}
}
@media only screen and (max-device-width: 768px) {
.login-panel {
width: 70%;
}
}
@media only screen and (max-device-width: 480px) {
.login-panel {
width: 90%;
}
.login-panel #close {
color: #fff;
}
.login-panel ul li {
display: list-item;
}
.login-panel ul li:nth-child(1) {
width: auto;
}
.login-panel ul li:nth-child(2) {
width: 100%;
}
.login-panel .single-signin {
position: relative;
width: auto;
padding: 45px 0;
}
}
/*Button Shake Animation*/
@-webkit-keyframes shake {
10%, 90% {
-webkit-transform: translate3d(-1px, 0, 0);
}
20%, 80% {
-webkit-transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
-webkit-transform: translate3d(-4px, 0, 0);
}
40%, 60% {
-webkit-transform: translate3d(4px, 0, 0);
}
}
@-moz-keyframes shake {
10%, 90% {
-moz-transform: translate3d(-1px, 0, 0);
}
20%, 80% {
-moz-transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
-moz-transform: translate3d(-4px, 0, 0);
}
40%, 60% {
-moz-transform: translate3d(4px, 0, 0);
}
}
@-o-keyframes shake {
10%, 90% {
-o-transform: translate3d(-1px, 0, 0);
}
20%, 80% {
-o-transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
-o-transform: translate3d(-4px, 0, 0);
}
40%, 60% {
-o-transform: translate3d(4px, 0, 0);
}
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
ScriptLoginForm.js
/*Code by CodingTuting.Com Jignesh Panchal*/
var AccForm = document.getElementById("AccForm");
var callBtn = document.getElementById("callLogin");
document.getElementById("callLogin").addEventListener("click", function(){
Object.assign(this.style,{transform:"scale(0)",visibility:"hidden",opacity:"0"});
window.setTimeout(function(){
Object.assign(AccForm.style,{transform:"scale(1)",visibility:"visible",opacity:"1"});
},500)
window.setTimeout(function(){
document.getElementById("userName").focus();
document.getElementById("emailId").focus();
},1200)
});
document.getElementById("close").addEventListener("click", function(){
Object.assign(AccForm.style,{transform:"scale(0)",visibility:"hidden",opacity:"0"});
window.setTimeout(function(){
Object.assign(callBtn.style,{transform:"scale(1)",visibility:"visible",opacity:"1"});
},500)
});
function formChange() {
var newAcc = document.getElementById("newUser");
var gBtn = document.getElementById("accGoogle");
var fBtn = document.getElementById("accFacebook");
var lsBtn = document.getElementById("logSignBtn");
var uIcon = document.getElementById("accIcon");
newAcc.classList.toggle("active");
window.setTimeout(function(){
document.getElementById("emailId").focus();
document.getElementById("userName").focus();
},700)
if(gBtn.innerHTML === "LogIn with Google") {
gBtn.innerHTML = "SignUp with Google";
}
else {
gBtn.innerHTML = "LogIn with Google"
}
if(fBtn.innerHTML === "LogIn with Facebook") {
fBtn.innerHTML = "SignUp with Facebook";
}
else {
fBtn.innerHTML = "LogIn with Facebook"
}
if(lsBtn.innerHTML === "SignUp") {
lsBtn.innerHTML = "LogIn";
document.getElementById("accIcon").setAttribute("class", "fas fa-sign-in-alt");
}
else {
lsBtn.innerHTML = "SignUp"
document.getElementById("accIcon").setAttribute("class", "fas fa-user-plus");
}
}
I hope you got - How To Create Login Page in HTML. Add this CSS Login Template with validation is very attractive. You can change the colors of the form like your website theme. Then use it.
Please read our more articles on Web Design and all. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Sharing is Caring
Thanks for Reading
Keywords & Queries covered in this tutorial are:
3 Comments
Write CommentsThanks for an interesting blog. What else may I get that sort of info written in such a perfect approach? I have an undertaking that I am just now operating on, and I have been on the lookout for such info. waterproof mattress cover baby
ReplyThanks for sharing this blog. I love this design - Amazing Transparent Login Form
ReplyThe author specialises in beds and mattresses and regularly writes home improvement and furniture shopping guides. cheap truck mattress
ReplyEmoticonEmoticon