"Login and Register tabbed form"
Bootstrap 3.3.0 Snippet by pukey22

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
<a href="#" class="active" id="login-form-link">Login</a>
</div>
<div class="col-xs-6">
<a href="#" id="register-form-link">Register</a>
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="https://phpoll.com/login/process" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
padding-top: 90px;
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align:center;
}
.panel-login>.panel-heading a{
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
color: #029f5b;
font-size: 18px;
}
.panel-login>.panel-heading hr{
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard PRO
login-form
Login Form
Bootstrap Two Login Form

Questions / Comments:

Hi guys!

So I did MultiForm.html, MultiForm.css as well as MultiForm.js that I copied exactly from above, but the outcome is totally different and when I clicked "Register" tab, nothing happened. Really need help ASAP. :(

The screenshot is here: https://s12.postimg.org/z7f...

Jwan Radzi () - 8 years ago - Reply -1

Add bootstrap link ref and jquery link ref too :)

Sergio Molina () - 8 years ago - Reply 0

How to load csrf_token (with this login / register page) from register form in Symfony2 FOSUserBundle?

klansser 2323 () - 9 years ago - Reply 0

SOLVED:

klansser 2323 () - 9 years ago - Reply 0

I cannot get the JS to shift me to another tab for the register tab - I just included into a <head> section of the HTML I created a
<link href="css/loginregister.css" rel="stylesheet"> which is the CSS you have, and also put <script src="js/loginregister.js"></script> . The css is now styled but the JS just isnt working. Any ideas?

Dhruv () - 9 years ago - Reply 0

Hola amigo agrega el script de jquery y te funcionará yo igual batalle saludos!

<script type="text/javascript" src="//code.jquery.com/jquery-1.10..."></script>

Angel Puc Yamá () - 9 years ago - Reply 0

Collection of Bootstrap Login Form Templates
http://www.designerslib.com...

DesignersLib () - 9 years ago - Reply 0

How do i send the form data to a php file? help me please
<form id="quick-login" role="form" class="form col-md-12 center-block" method="post" action="{$mybb-&gt;settings['bburl']}/member.php">

Chaz Cash () - 9 years ago - Reply 0

Hey how do I make it such that Register is the default active tab?

Edit: nvm i got it

Abdul Aziz () - 9 years ago - Reply 0

You just change these line below; the class="active" needs moving for which is active.

Login
</div>
<div class="col-xs-6">
Register

to:

Login
</div>
<div class="col-xs-6">
Register

Ed () - 9 years ago - Reply 0

for got code brackets

Ed () - 9 years ago - Reply 0

When the HTML from this snippet is placed inside an HTML template that is used to populate an Angular ui-view, it stops working. Clicking the "Register" link doesn't work. When I paste the HTML back in the main template in place of the ui-view, it works again. Why is the JS function not found when the html is inside a ui-view?

Alex G. () - 9 years ago - Reply 0

Hey, when using Angular, the html for the view template is not loaded until that template is activated within your UI. Because the Javascript in this snippet is executed when the web page loads, the jQuery will not find the elements which it binds the click events to.
To use it with Angular, I would create a controller for your ui view and have the functions as part of that, finally add ng-click to the html to call your controller.

Wayne Coles () - 9 years ago - Reply 0

Thanks Wayne. I ended up writing a directive to take care of this.

Alex G. () - 9 years ago - Reply 0