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 programmer for your thesis system or anyone who needs a sourcecode in any programming languages.  You can contact me @ :

Email – [email protected]

Mobile No. – 09305235027 – tnt