Login Registration Form Switch With JavaScript

In this tutorial, we will see how to create two forms which will switch between login and registration using JavaScript.

Here signup form will switch to login and vice-versa. It is better to keep your signup page interesting for new visitors to show their interest in being registered user. Forms switch needs no loading time to switch from login to sign up and also become user friendly.

Here in this tutorial we have designed simple form for login and signup and switch between it using JavaScript.
Let us see the given below snippet to understand it in detail.

Demo

[sociallocker]Download[/sociallocker]

HTML

<form action="#" method="GET">
<h1>Login Registration form switching</h1>
<div id="log">
<center><h4>Login Here</h4></center>
<label>Email</label><input type="text" name="email" id="email"><br>
<label>Password</label><input type="text" name="name" id="name"><br>
<input type="submit" name="login"  value="Login"><br><br><br> 
<a href="#" onclick="next()" >You don't have an account yet? Register Here</a>
</div>

<div id="regis">
<center><h4>Register</h4></center>
<label>Name</label><input type="text" name="name" ><br>
<label>Email</label><input type="text" name="dob" ><br>
<label>Password</label><input type="text" name="mobile" ><br>
<input type="submit" name="firstnext" value="Register"><br><br><br>
<a href="#" onclick="prev()" >You have an account already? Login Here</a>
</div>
</form>

JAVASCRIPT

<script src="jquery.js"></script>   
<script>
function next(){
document.getElementById('log').style.display = "none";
document.getElementById('regis').style.display = "block";
}
function prev(){
document.getElementById('regis').style.display = "none";
document.getElementById('log').style.display = "block";
}

</script>

CSS

div
{
display:none;
width:320px;
height: 345px;
border-radius:5px;
padding:5px;
margin:10px;
box-shadow:2px 2px 8px 5px grey;

}
#log{
display:block;
width:320px;
height: 345px;
border-radius:5px;
padding:5px;
margin:10px;
box-shadow:2px 2px 8px 5px grey;
}
input[type="text"] {
    width: 212px;
    height: 38px;
    padding: 2px;
    border-radius: 5px;
    margin: 7px;
    margin-left: 23px;
}
input[type="password"] {
    width: 212px;
    height: 38px;
    padding: 2px;
    border-radius: 5px;
    margin: 7px;
    margin-left: 20px;
}
input[type="submit"] {
    width: 124px;
    float: right;
    border-radius: 15px;
    padding: 9px;
    background: cadetblue;
    color: #fff;
    font-weight: 900;
    border: 2px solid #ededed;
	margin-top:7px;
}
input#email {
    margin-left: 46px;
}
h4{
color:blue;
}
h1{
color: red;
}