This post is a continuation of my previous post Bootstrap tutorial for blog design and already explained about fluid page design. Today let's look at the form HTML elements that comes with Twitter Bootstrap toolkit using these I made a rich registration/sign up form with validation in 10 mins . Bootstrap helps you to produce clean and highly usable applications, it will reduce larger engineering efforts and gives uniform application solutions.
Download Twitter Bootstrap Project from https://github.com/twitter/bootstrap .
Bootstrap CSS
Just include two CSS file bootstrap.css and bootstrap-responsive.css . You can use github url toohttp://twitter.github.com/bootstrap/assets/css/bootstrap.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Page Title </title>
<meta name="viewport" content=" width=device-width, initial-scale=1.0 ">
<link href=" assets/css/bootstrap.css " rel="stylesheet">
<link href=" assets/css/bootstrap-responsive.css " rel="stylesheet">
</head>
<body>
<div class=" container ">
<div class=" row ">
<div class=" span8 ">
// Registration form code.
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Page Title </title>
<meta name="viewport" content=" width=device-width, initial-scale=1.0 ">
<link href=" assets/css/bootstrap.css " rel="stylesheet">
<link href=" assets/css/bootstrap-responsive.css " rel="stylesheet">
</head>
<body>
<div class=" container ">
<div class=" row ">
<div class=" span8 ">
// Registration form code.
</div>
</div>
</div>
</body>
</html>
For bootstrap page design reference please check my previous tutorial click here .
HTML Form Code
Here the red color font names are Bootstrap class elements for styling, you can use different class names for input size input-small , input-medium and input-large .
<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>
<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.
<div class=" control-group success ">
.......
.......
</div>
.......
.......
</div>
Error
Same way for error status just add error class to the control-group div. While validation you have to apply these class styles using Jquery methods.
<div class=" control-group error ">
.......
.......
</div>
.......
.......
</div>
Popover for Information.
I really like this feature in Bootstrap it is simple just calling .popover method for javascript code take a look at the following javascript code. Notice html attribute for popover data-content for content and data-original-title for title.
Download bootstrap asserts Click Here
JavaScript
Contains javascript code here you have to include Bootstrap assert javascript files refer my previous tutorial . $("#registerHere input").hover(function(){} - registerHere is the id name of form tag. Using$(this).popover(); calling delete.
<!-- Include Bootstrap Asserts JavaScript Files. -->
<script type=" text/javascript " src=" jquery.validate.js "></script>
<script type=" text/javascript ">
$( document ). ready ( function ()
{
// Popover
$(' #registerHere input '). hover ( function ()
{
$( this ). popover ('show')
});
// Validation
$(" #registerHere "). validate ({
rules :{
user_name :" required ",
user_email :{required: true ,email: true },
pwd :{required: true ,minlength: 6 },
cpwd :{required:true,equalTo: " #pwd "},
gender :" required "
},
messages :{
user_name :" Enter your first and last name ",
user_email :{
required:" Enter your email address ",
email:" Enter valid email address "},
pwd :{
required:" Enter your password ",
minlength:" Password must be minimum 6 characters "},
cpwd :{
required:" Enter confirm password ",
equalTo:" Password and Confirm Password must match "},
gender:" Select Gender "
},
errorClass : " help-inline ",
errorElement : " span ",
highlight :function(element, errorClass, validClass)
{
$( element ).parents(' .control-group '). addClass (' error ');
},
unhighlight : function(element, errorClass, validClass)
{
$( element ).parents(' .control-group '). removeClass (' error ');
$( element ).parents(' .control-group '). addClass (' success ');
}
});
});
</script>
<script type=" text/javascript " src=" jquery.validate.js "></script>
<script type=" text/javascript ">
$( document ). ready ( function ()
{
// Popover
$(' #registerHere input '). hover ( function ()
{
$( this ). popover ('show')
});
// Validation
$(" #registerHere "). validate ({
rules :{
user_name :" required ",
user_email :{required: true ,email: true },
pwd :{required: true ,minlength: 6 },
cpwd :{required:true,equalTo: " #pwd "},
gender :" required "
},
messages :{
user_name :" Enter your first and last name ",
user_email :{
required:" Enter your email address ",
email:" Enter valid email address "},
pwd :{
required:" Enter your password ",
minlength:" Password must be minimum 6 characters "},
cpwd :{
required:" Enter confirm password ",
equalTo:" Password and Confirm Password must match "},
gender:" Select Gender "
},
errorClass : " help-inline ",
errorElement : " span ",
highlight :function(element, errorClass, validClass)
{
$( element ).parents(' .control-group '). addClass (' error ');
},
unhighlight : function(element, errorClass, validClass)
{
$( element ).parents(' .control-group '). removeClass (' error ');
$( element ).parents(' .control-group '). addClass (' success ');
}
});
});
</script>
For form validation I have included jquery validate plugin using addClass and removeClass methods applied success and error class styles to the control-group div.
Success Message
Registration status show this DIV tag after server side request successful.
<div class=" alert alert-success ">
Well done! You successfully read this important alert message.
</div>
Well done! You successfully read this important alert message.
</div>
Source: http://www.tuicool.com/articles/MZRVfi
For Further Reading,
