✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

HTML5 Login And Signup Form With Animation Using jQuery

Last Updated : Jul 1, 2023

IN - HTML5 jQuery CSS | Written & Updated By - Anjali

In this tutorial we will show you how to create HTML5 login and signup form with animation using jQuery, 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.

It also minimise the use of external libraries because of its already pre defined markups which were not present in earlier versions. You may also like login form with shake animation effect.

HTML5 Login And Signup Form With Animation Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on login form and signup form animation helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →