Login & Sign Up form in tab style

By w3iscool, October 18, 2015

In this tutorial i am going to create a Login & Sign Up form in tab style with flat user interface.

Login Signup form

Hi friends! i am back with another tutorial after creating Login form and Dropdown Menus. In this post i want to explain how to design tab style login & sign up form panel with CSS, HTML and Jquery. Tab form user interface will give a good user experience. Lets start to implement a login and sign up form with tabbed system.

The HTML

<div class="forms">
	<ul class="tab-group">
		<li class="tab active"><a href="#login">Log In</a></li>
		<li class="tab"><a href="#signup">Sign Up</a></li>
	</ul>
	<form action="#" id="login">
	      <h1>Login on w3iscool</h1>
	      <div class="input-field">
	        <label for="email">Email</label>
	        <input type="email" name="email" required="email" />
	        <label for="password">Password</label> 
	        <input type="password" name="password" required/>
	        <input type="submit" value="Login" class="button"/>
	        <p class="text-p"> <a href="#">Forgot password?</a> </p>
	      </div>
	  </form>
	  <form action="#" id="signup">
	      <h1>Sign Up on w3iscool</h1>
	      <div class="input-field">
	        <label for="email">Email</label> 
	        <input type="email" name="email" required="email"/>
	        <label for="password">Password</label> 
	        <input type="password" name="password" required/>
	        <label for="password">Confirm Password</label> 
	        <input type="password" name="password" required/>
	        <input type="submit" value="Sign up" class="button" />
	      </div>
	  </form>
</div>

As you can see above code i have created paren element class=”form”, tab-group and to different form for login and sign up.

Tabs HTML

Create vertical box for tab in href atribute give name login and signup and give same id login and sign up form group you can checkout in above html markup.

<ul class="tab-group">
	<li class="tab active"><a href="#login">Log In</a></li>
	<li class="tab"><a href="#signup">Sign Up</a></li>
</ul>

Form CSS code download source

After appling css you from will look like the below given image. Bydefault Sign up form box will display=”done”.

Login Signup form

The Javascript

Time to handling html element with javascript. This code will create custom jquery tab system.

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	  $('.tab a').on('click', function (e) {
	  e.preventDefault();
	  
	  $(this).parent().addClass('active');
	  $(this).parent().siblings().removeClass('active');
	  
	  var href = $(this).attr('href');
	  $('.forms > form').hide();
	  $(href).fadeIn(500);
	});
});
</script>

If you like this tutorial share with your friends and comment below.

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *