Check Out The Latest Themes And Exclusive Deals And Offers On Themes
In Our Deals For Web Developers Section


Join Today And Get All The 87 Themes In Just $69! Join Today

HTML5 Login And Signup Form With Animation Using jQuery

Friday, Jan 27, 2017

Tags:- HTML5 jQuery CSS


HTML5 is a latest version of web markup language HTML it introduced many features which helps in creating a better web application and making our markup more interactive and secure and it also minimise the use of external libraries because of its already pre defined markups which were not present in earlier versions.In this tutorial we will show you how to create HTML5 login and signup form with animation using jQuery.You may also like login form with shake animation effect.


See Demo
HTML5 Login And Signup Form With Animation Using jQuery


To Create HTML5 Login And Signup Form With Animation It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name form.html

<html>
<head>
<link href="form_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function show_signup()
{
 $("#login_div").fadeOut('fast', function() {
  $("#register_div").fadeIn();
 });
}
function show_login()
{
 $("#register_div").fadeOut('fast', function() {
  $("#login_div").fadeIn();
 });
}
</script>
</head>
<body>
<div id="wrapper">

<section id="login_div">
 <form  action="" autocomplete="on">
  <h1>LOG IN</h1>
  <p><input name="username" required="required" type="email" placeholder="Enter Your Email"/></p>
  <p><input name="password" required="required" type="password" placeholder="************" /></p>
  <p><input type="submit" value="DO LOGIN"/></p>
  <p class="change_link">Not a member yet ?<input type="button" onclick="show_signup();" value="Join us"></p>
 </form>
</section>

<section id="register_div">
 <form action="" autocomplete="on">
  <h1>SIGN UP</h1>
  <p><input name="username" required="required" type="text" placeholder="Enter Your Name"/></p>
  <p><input name="email" required="required" type="email" placeholder="Enter Your Email"/></p>
  <p><input name="password" required="required" type="password" placeholder="*********"/></p>
  <p><input name="password_confirm" required="required" type="password" placeholder="*********"/></p>
  <p><input type="submit" value="DO SIGN UP"/></p>
  <p class="change_link">Already a member ?<input type="button" onclick="show_login();" value="Log in"></p>
 </form>
</section>

</div>
</body>
</html>

In this step we use HTML5 'section' tag it works like a 'div' you can also use 'div' in place of 'section'.We create two section tag for login and signup form. We use some of the HTML5 tags which is used in forms like autocomplete="on", 'input type="email"' and required="required" which are newly introduced in HTML5.You may also like create responsive login and signup form.



Step 2.Make a CSS file and define styling

We make a CSS file and save it with a name form_style.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#21610B;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#register_div
{
 display:none;
}
section
{
 background-color:white;
 width:300px;
 box-sizing:border-box;
 margin:10px;
 margin-left:347px;
 padding-bottom:10px;
 box-shadow:0px 0px 10px 0px #122A0A;
}
#wrapper section h1
{
 color:#21610B;
 font-size:30px;
 margin:0px;
 background-color:#CEF6CE;
 height:60px;
 line-height:65px;
}
section input[type="text"]
{
 width:220px;
 height:40px;
 padding-left:5px;
 font-size:15px;
}
section input[type="email"]
{
 width:220px;
 height:40px;
 padding-left:5px;
 font-size:15px;
}
section input[type="password"]
{
 width:220px;
 height:40px;
 padding-left:5px;
 font-size:15px;
}
section input[type="submit"]
{
 width:220px;
 height:40px;
 background-color:#088A08;
 border:none;
 color:white;
 font-weight:bold;
}
section .change_link
{
 color:#21610B;
}
section .change_link input[type="button"]
{
 background:none;
 border:none;
 text-decoration:underline;
 color:#2E64FE;
 font-size:15px;
 cursor:pointer;
}

Always validate your data before sending to database you can view our validate form using jQuery tutorial to prevent from sql injections.


That's all, this is how to create HTML5 login and signup form with animation using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email