Bootstrap Forms
Bootstrap Forms : Bootstrap provides three types of forms -vertical, horizontal and inline. Based on your requirement you can easily create these forms. Generally creating a form in html and styling them using css is a boring task. Bootstrap forms comes with the rich form elements and well organised layout. You need only add classes to make them beautiful. Thus bootstrap has simplified our task by providing well defined classes for creating form. Here in this tutorial we are going to explain how you can create Forms in Bootstrap. You can also use our online
editor to edit and run the code online.
Bootstrap Forms Example
Bootstrap provides basically three types of forms as below :
1. Vertical Form
2. Horizontal Form
3. Inline Form
Now let us go one by one to understand the bootstrap forms-
Bootstrap Vertical Form
By Default bootstrap creates vertical form, this comes with the bootstrap’s default setting. For Creating bootstrap you need to add following css and role in form elements.
1 – Add Role : First Add Role(form) in Form tag –
<form role="form"></form>
2 – Add Form Group Wrapper –
<form role="form">
<div class="form-group">
</div>
</form>
3 – Add Form Input Element – Add .form-control class in form input fields.
<form role="form">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" name= "First Name" class="form-control" id="fname" placeholder="Enter First Name">
</div>
</form>
Note : By default bootstrap provides 100 % width of input fields
<form role="form">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" name= "First Name" class="form-control" id="fname"
placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" class="form-control" id="email"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" name="phone" class="form-control" id="phone"
placeholder="Enter Phone No">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="password" name="password" class="form-control" id="password"
placeholder="Enter Password">
</div>
<div class="form-group">
<label for="Password">Confirm Password</label>
<input type="password" name="confirmpassword" class="form-control" id="confirmpassword"
placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
|
Bootstrap Horizontal Form
The predefined class .form-horizontal is used to create horizontal form in bootstrap. Additional class for label elements used is .control-label
1 – Add class .form-horizontal in tag <form> .
2 – Add Class .control-label in labels
Example of Horizontal form is –
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="firstname">First Name</label>
<div class="col-sm-10">
<input type="text" name= "First Name" class="form-control" id="fname" placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Phone">Phone</label>
<div class="col-sm-10">
<input type="text" name="phone" class="form-control" id="phone" placeholder="Enter Phone No">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Password">Password</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Password">Confirm Password</label>
<div class="col-sm-10">
<input type="password" name="confirmpassword" class="form-control" id="confirmpassword"
placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Password">Submit </label>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
|
The above code will produce the following result –
Bootstrap Inline Form
Bootstrap inline form are used when you need to display form’s all field in single line. The form class .form-inline is used to generate the inline form. The simple example can be search box with search button or login form in a single line.
<form role="form" class="form-inline">
<div class="form-group">
<label for="username">Username</label>
<input type="text" name= "username" class="form-control" id="uname" placeholder="Enter Username">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label for="Password">Submit </label>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
|
The Above code will produce the following output-
Advertisements
