Vertical forms are the default layout of bootstrap forms. The attribute used here is role and the value of it is set to form to provide better accessibility and automatic and default styling for the form. The syntax for this is as follows:

<form role="form"> … </form>

Many a time, we also come across forms in which the elements of the forms are present inline and in a single line and left aligned. Inline forms are required to have the form-inline class for the <form> element. The syntax for this as follows:

<form class="form-inline" role="form"> … </form>

A horizontal form is the most nifty of this set and is broadly used on web pages to collect data from website users. The appearance and performance of this form is something that sets it apart from the other two types of forms. This form aligns labels and groups of form controls in a horizontal layout.

Horizontal forms are required to have the form-horizontal class for the <form> element. Additionally, labels are to have the control-label class for the <label> element. The syntax is as follows:

<form class="form-horizontal" role="form"> … </form>

All different input types supported by HTML are available to use even in Bootstrap, making it simple for someone from an HTML background to grasp the concepts. Inputs such as textarea, password, radio button, checkbox and many more are supported in Bootstrap.

The syntax for a simple text box as a means of input is as follows:

<input type="text" class="form-control" placeholder="Text input" id ="txtName">

If we want the text altered to not show the actual letters being typed in, then we can use the input type as password. The syntax for using the input type as password is as follows:

<input type="password" class="form-control" placeholder="Text input" id="txtPassword">

The textarea is an area that holds text entered by the user; it can hold small words to large paragraphs. The syntax for textarea is as follows:

<textarea class="form-control" rows="44"></textarea>

The preceding line tells the control that the textarea must span four rows.

The help block provides block-level help text for form controls:

<span class="help-block">  </span>

The checkbox control allocates a box to a certain group of related options that can be selected by clicking on the box. This feature is used when the user is required to select only from the given options. The syntax for adding a checkbox is as follows:

<div class="checkbox">    </div>

Here is the syntax to add a checkbox that is disabled:

<div class="checkbox disabled">    </div>

The select class control triggers a dropdown menu that contains a group of options from which only one can be selected at a time. Its syntax is as follows:

<select class="form-control"> … </form>

The radio class control does the same as the checkbox except that the user can choose only one option at a time. Its syntax is as follows:

<div class="radio"> … </div>

Here is the syntax to add a radio class that is disabled:

<div class="radio disabled">    </div>

The static class control allows the user to insert text in a horizontal form next to its corresponding label. Text can be added next to a form label in a horizontal form using the "form-control-static" class within paragraph tags. The form-static-control class must be used.

The following example inserts the static text—Web Developer's Reference Guide:

<p class="form-control-static">Web Developer's Reference Guide<p> 

The input class lets an input field automatically focus when the page loads. Its syntax is as follows:

<input class="form-control" id="focusedInput" type="text" value="...">

The disabled attribute disables input in a particular text box, it cannot be clicked on or used. To use this, the disabled attribute can be added to a <fieldset> tag to disable all of its controls.

These classes give meaning to input controls when returning a message from the server such as fields that were left empty or when an incorrect combination is entered.

Validation states can be used by adding .has-success, .has-warning, or .has-error in a class. This is shown in the following code:

<div class="form-group has-success"> … </div>
<div class="form-group has-warning"> … </div>
<div class="form-group has-error"> … </div>

Users can easily set the height of various columns as per their requirement.

We can easily set heights and widths using classes such as .input-lg and .col-lg-*:

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<div class="col-xs-2"> … </div>