Welcome to the third part of our twitter bootstrap tutorials series. I hope you are doing good. In the previous tutorial which was practically the first tutorial of our series we learnt how to make attractive forms using twitter bootstrap. Today we will be learning how you make search forms and in-line forms for your website.
Search Forms Using Bootstrap:
As you are following this series you should know we used “well” class in our previous tutorial to make our login form. In this tutorial we are including another class with the name form-search for adding the features of a search form in our existing form.
Let’s see how?
<form class= "well form-search"> <label>Search</label><input type=”text” class= "search-query span3" placeholder="Search..."/> <button>Search</button> </form>
You can see we have added another additional class “Form-Search” for adding specialty of search forms to our form and another thing you might have notice is the search-query class. What this search-query class does is it makes a good looking capsule like text field for you without any CSS code with the help of twitter bootstrap.
Inline Forms Using Bootstrap:
The property of inline forms is that the elements in this forms appears in a single line.
Let’s see how?
<form> <label>Username:</label></label><input type=”text” placeholder=”UserName...” /> <label>Password:</label><input type=”password” placeholder=”Password...” /> <button name="Search " > Login</button> </form>
We have included two text boxes with a button, it is a login form but unlike previous one text boxes appears in a single line.
The total code and final result of this website is given below:
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <head> <title> Usama Noman | Profile </title> <link type="text/css" rel="stylesheet" href="bootstrap.css"/> <script type="text/javascript" src="bootstrap.js"></script> </head> <body background="new.jpg" style="background-repeat: no-repeat" > <form class= "well form-search"> <label>Search</label><input type=”text” class= "search-query span3" placeholder="Search..."/> <button>Search</button> </form> <br> <form> <label>Username:</label></label><input type=”text” placeholder=”UserName...” /> <label>Password:</label><input type=”password” placeholder=”Password...” /> <button name="Search " > Search</button> </form></body> </html>
Image:
Author Description
