Login and Signup in the Tab Control with CSS and jQuery

Today, I will teach you how to create log-in and sign-up using tab control. We will be using CSS for the design of the tab menu and smooth transition using jQuery.  

This is the basic implementation of CSS and jQuery.

Below are the step by step processes in making of this project.

1.Create a CSS file for the layout of the design. Name it “style.css”.

[css]

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px; background-color:#eee;
}

#wrap{
width:500px;

position: center;
padding: 12px;
}
#tab-menu{
height:40px

}
#content{
background-color:#FFF;

}
.tab-link{
background: #dedede;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 80px;
float: left;
font-weight: bold;
}

.tab-active{
background-color:#FFF;

}

#login-box{
height:300px;
padding:10px;
}

#signup-box{
height:300px;
padding:10px;
display:none;
}

[/css]

2.Create a design for login and registration form in the tab control. Name it “index.php”.

[html]

<!-- css extension -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- wrap -->
<div id="wrap">
<h1><a href="itsourcecode.com">IT Sourcecode</a></h1>
<!-- menu -->
<div id="tab-menu">
<a href="#" id="login" class="tab-link tab-active">Log-in</a>
<a href="#" id="signup" class="tab-link">Sign-up</a>
</div>
<!-- end menu -->
<!-- content -->
<div id="content">
<!-- login tab -->
<div id="login-box"><h1>Log-in Form</h1>
<form role="form" action="#" method="post">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class=" form-control" id="form-password">
</div>
<button type="submit" name="login" class="btn">Login!</button>
</form>
</div>
<!-- end login tab -->
<!-- signup tab -->
<div id="signup-box"><h1>Sign-up Form</h1>
<form role="form" action="#" method="post" >
<div class="form-group">
<label class="sr-only" for="fname">Name</label>
<input type="text" name="fname" placeholder="Full name..." class="form-control" id="fname">
</div>

<div class="form-group">
<label class="sr-only" for="user-name">Username</label>
<input type="text" name="user-name" placeholder="Username..." class="form-control" id="user-name">
</div>
<div class="form-group">
<label class="sr-only" for="user-pass">Password</label>
<input type="password" name="user-pass" placeholder="Password..." class="form-control" id="user-pass">
</div>
<button type="submit" name="register" class="btn">Submit</button>
</form>
</div>
<!-- end signup tab -->
</div>
<!-- end content -->
</div>
<!-- end wrap -->

[/html]

3. Create a script for the transition of the tab control. Do this under the extension of jQuery.

[jquery]

<!-- jquery extension -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="application/javascript">
$(document).ready(function(){

if(action=='signup') {
$("#login").removeClass('tab-active');
$("#signup").addClass('tab-active');
$("#login-box").slideUp();
$("#signup-box").slideDown();
}else{
$("#signup").removeClass('tab-active');
$("#login").addClass('tab-active');
$("#signup-box").slideUp();
$("#login-box").slideDown();
}

});

});
</script>

[/jquery]

For all students who need a programmer for their thesis system, or anyone who needs source code in any programming language, you can contact us.

Related PHP Projects

• Validate Registration Form jQuery
• Login With Facebook Using PHP
• Laravel Login Page With Source Code
• Login Page PHP Database Source Code
• Sorting Data In The Table With jQuery PHP And MySQL
• Shopping Cart Wit jQuery AJAX PHP