Login Form Using Bootstrap Javascript & CSS

This post is all about tricks and tips to enhance the power of your web page. Now i'm going to explain you about Twitter Bootstrap Toolkit. It is a complete package where all basic CSS and Javascript's functions are predefined. You just have to include those files and call them in your code. Most websites are using Bootstrap. Its simple to use and very effective.
Lets build a login/registration form using bootstrap. Its so simple just give a look at it. Its a simlified user registration form with validation and most important it gives you success message.
Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap.

 Download the whole code.

Bootstrap CSS :

Just include two css file bootstrap.css and bootstrap-responsive.css. You can use the url http://twitter.github.com/bootstrap/assets/css/bootstrap.css

// Registration form code.

HTML Form Code:

<form class="form-horizontal" id="registerHere" method='post' action=''>
<fieldset>

<legend>Registration</legend>

<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
</div>
</div>


<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>

.............
.............

<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Create My Account</button>
</div>
</div>

</fieldset>
</form>

 

 

Success:

For Success status just add "success class" to the control-group div.

 

Popover Information:

This is the most unique and awesome feature used in twitter bootstrap toolkit. Here you can get the title of the textfield by just calling .popover method.

 

Javascript:

 

Success Message :

Registration status will show this div tag after server side request successful .

Well done! You successfully read this important alert message.