Tabbed Style Login Registration Form Design Using HTML5, CSS3 & jQuery

Sahil Kumar | 8 months ago | CSS3 |


Hello Friends! I'm back with another very simple tutorial. In this post, I'm going to show you how to design a nice fully responsive Tabbed Style Login & Registration Form Using HTML5, CSS3 & jQuery. I'm using HTML5 for markup, CSS3 for styling and jQuery for making tab working.

So without wasting any time let's start this tutorial. Don't worry I'll share all the codes here and I'll also show you everything in steps. This tutorial is very easy you will understand very easily.

Creating a directory

In this step, We'll create a directory anywhere in your system. I'm creating in Desktop and naming the directory "tab-login-register", you can name it anything. After creating directory open it in your code editor.

Creating an index.html file

Now next in this step We'll create an index.html file. In this file, We'll write markup of login and registration form. So just copy the below codes and paste in your index.html file and save.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="author" content="Sahil Kumar" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Tabbed Style Login & Registration Form Using CSS3 & jQuery</title>
    <link href="" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <script src=""></script>
    <script type="text/javascript" src="script.js"></script>
    <div id="main">
      <!-- Tab Buttons -->
      <div id="tab-btn">
        <a href="#" class="login-tab active">Sign In</a>
        <a href="#" class="register-tab">Sign Up</a>
      <!-- Login Form -->
      <div class="login-box">
        <h2>Get Started!</h2>
        <form action="#" method="post" id="login-form">
          <input type="text" name="username" placeholder="Username" class="inp" required autofocus /><br />
          <input type="password" name="password" placeholder="Password" class="inp" required /><br />
          <a href="#" id="forgot">Forgot Password?</a><br />
          <input type="submit" name="submit" value="SIGN IN" class="sub-btn" />
      <!-- Registration Form -->
      <div class="register-box">
        <h2>Register With Us!</h2>
        <form action="#" method="post" id="reg-form">
          <input type="text" name="uname" placeholder="Enter Username" class="inp" required autofocus /><br />
          <input type="email" name="email" placeholder="Enter Email" class="inp" required /><br />
          <input type="password" name="pass" placeholder="Enter Password" class="inp" required /><br />
          <input type="password" name="repass" placeholder="Confirm Password" class="inp" required /><br />
          <input type="submit" name="submit" value="SIGN UP" class="sub-btn" />

In the above coding, you can see I've included the CDN of jQuery library and I've also linked style.css and script.js file. We'll create these files in the next step. For now, you can see in the coding I've written markups for login and registration form

Creating a style.css file

In this step, We'll create another file in the root of the directory i.e., style.css. Now inside this file, We'll write CSS codes to style the forms and tabs. So just copy the below CSS codes and paste in your style.css file and save.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Cabin";
body {
  background-color: #009688;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
#main {
  max-width: 95%;
  width: 500px;
#tab-btn {
  display: flex;
.register-tab {
  text-decoration: none;
  display: block;
  width: 100%;
  background-color: #37474f;
  text-align: center;
  color: #fff;
  font-size: 25px;
  padding: 10px;
.active {
  background-color: #eee;
  color: #000;
.register-box {
  width: 100%;
  background-color: #eee;
  padding: 20px 30px 30px 30px;
  box-shadow: 2px 2px 5px #555;
.register-box {
  display: none;
.inp {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  font-size: 20px;
  border: 2px solid #888;
  border-bottom: 5px solid #888;
  background-color: #fff;
  color: #666;
.inp:focus {
  outline: none;
  border: 2px solid #555;
  border-bottom: 5px solid #555;
.sub-btn {
  width: 100%;
  padding: 12px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background-color: #f44336;
  color: #fff;
  cursor: pointer;
  border-bottom: 5px solid #444;
.sub-btn:focus {
  outline: none;
.sub-btn:active {
  border: none;
  margin-top: 5px;
#forgot {
  font-size: 20px;
  color: #444;
  text-decoration: none;
  display: block;
h2 {
  text-align: center;
  padding-bottom: 15px;
  font-variant: small-caps;
  color: #333;
  font-size: 30px;

In above CSS coding, you can see by default I've hidden the registration form using display: none; CSS property, later from jQuery code I'll make it visible. 

Creating a script.js file

In this step, We'll create another file in the root of the directory i.e., script.js. Now inside this file, We'll write jQuery codes to make tab working. First, just copy the below codes and paste in your script.js file and save.

$(document).ready(function () {
  $(".register-tab").click(function () {
  $(".login-tab").click(function () {

In above jQuery codings, you can see I've used a click event on the register tab button click. Now inside this function, I'm hiding the login form and displaying the registration form that was by default hidden using style.css. And I'm also assigning an active class to register tab button and removing the active class from login tab button. Similarly, I'm doing on the login tab click.

Some Screenshots of Tabbed Style Login & Registration Form Design Using HTML5, CSS3 & jQuery 

Tabbed Style Login & Registration Form Design Using HTML5, CSS3 & jQuery


Tabbed Style Login & Registration Form Design Using HTML5, CSS3 & jQuery

So above you can see some screenshots of the forms. If you liked this post then share this post with your friends. If you have any issue regarding this post then comment down your issues, I'll try to fix your issues as soon as possible. And if you want to learn more about Web Design & Development then you must visit my YouTube Channel.

Share Post Via
Related Posts
No Related Posts Found!
Give A Comment
Youtube Channel
Subscription Box
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

About Me
User Management System

Sahil Kumar

Full Stack Web Developer
Hello! I'm a part time Blogger & Youtuber living in India. This is my blog where I writes programming tutorial posts!
Follow Me