Skip to main content

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
Page Title


// 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.

Comments

  1. I found the information in blogs are very useful. I appreciate your efforts for providing information about bootstrap. For Digital marketing solution please visit at:
    http://mixorg.com/

    ReplyDelete

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1