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.

Technology stack and requirements

To run this PHP project, you need these tools on your development machine:

• XAMPP or WAMP server. Bundles Apache, MySQL, and PHP so you can run PHP on Windows without individual installs. Free from apachefriends.org.
• PHP 8.0 or higher. Included with XAMPP. Older versions (5.x, 7.x) may work but modern PHP features improve security and performance.
• MySQL or MariaDB. Comes with XAMPP. phpMyAdmin manages the database through a browser UI.
• VS Code or PhpStorm. Free code editor with PHP syntax highlighting, IntelliSense, and debugging support.
• Web browser. Chrome, Firefox, or Edge for testing the running app.

Installing the source code

1. Download the archive. Get the ZIP file from the download link on this page and extract it.
2. Move to htdocs. Place the extracted folder inside C:\xampp\htdocs\ so Apache can serve it.
3. Import the database. Open http://localhost/phpmyadmin, click Import, and select the .sql file included in the archive.
4. Update database credentials. Open the config.php or connection.php file and set the correct database name, username, and password (default XAMPP: root / empty password).
5. Run the project. Start Apache + MySQL in XAMPP, then visit http://localhost/your-project-folder/ in a browser.

Using this project for your BSIT capstone

This PHP project maps cleanly to standard BSIT capstone documentation. Suggested chapter alignment:

• Chapter 1 (Introduction). Discuss the problem the system solves in real-world context. Cite Philippine business or academic use cases where a manual process could be replaced.
• Chapter 2 (Review of Related Literature). Compare this system’s features against 5-10 similar published projects. Cite journals like IJERT or IEEE Access for academic-standard sources.
• Chapter 3 (Methodology). Include Use Case Diagram, Data Flow Diagram, Entity Relationship Diagram, and Activity Diagram covering all major workflows.
• Chapter 4 (Results and Discussion). Screenshot each module of the running system with a caption explaining what data it processes and which user role interacts with it.
• Chapter 5 (Conclusion and Recommendations). Identify features that could be added in a Version 2, such as mobile app, REST API export, or AI-powered analytics.

Modules typical of Login and Signup in the Tab Control with CSS and jQuery

• Master data. CRUD forms for the primary entities with search and filter.
• Transaction processing. Data entry forms for day-to-day operations the system automates.
• Reports. Formatted printable output summarizing activity per day, user, or category.
• User management. Login with role-based permissions (Admin, Encoder, Viewer).
• Backup and restore. Export database to a .sql file and restore when needed.

Common enhancements for capstone review

• Modernize the UI. Add Bootstrap 5 or Tailwind CSS for a polished appearance.
• Add printable receipts. Use TCPDF or FPDF to generate PDF reports.
• Multi-user concurrency. Ensure database handles simultaneous writes without lost-update errors.
• Rewrite in Laravel. Migrate to Laravel for maintainability and modern development patterns.

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