Bootstrap V2 Forms

In this tutorial, you will learn how to create forms using the Bootstrap 2.0 toolkit. Bootstrap has already defined styles for form controls such as input, textarea, and select, supports lists and checkboxes, and defines styles for disabled form controls, including error, warning, and success states for each form control. Starting from version 2.0, Bootstrap provides four types of form layouts: * Vertical (default) * Search * Inline * Horizontal In the previous version of Bootstrap, the default form layout was horizontal. However, since version 2.0, the vertical layout has become the default. The default Bootstrap form layout (i.e., the vertical form) is styled by the .form-vertical class in bootstrap.css. Since this is the default layout, there is no need to specify the .form-vertical class when creating a form using the default layout. The following example demonstrates a form created using Bootstrap 2.0's default form layout. The .well class is used to create a container for the form (of course, it also has other uses). This class can be found in bootstrap.css lines 1650 to 1663. For this layout, input fields are (#). The following example shows how to create a default form layout using Bootstrap. ## Example Label Name Related help documentation! Select me ## View Online [View the above example in different browser windows.](#) A search form is created using the .form-search class located in bootstrap.css lines 962 to 1003 (these lines also include the styles for .form-inline). For this layout, input fields are (#). Here is an example: ## Example </form ## View Online [View the above example in different browser windows.](#) An inline form is created using the .form-inline class located in bootstrap.css lines 962 to 1003 (these lines also include the styles for .form-search). For this layout, input fields are (#). Here is an example: ## Example Remember me </form ## View Online [View the above example in different browser windows.](#) A horizontal form is created using the .form-horizontal class in bootstrap.css. For this layout, input fields are (#). Here is an example: ## Example

Controls Supported by Bootstrap

Text Input

In addition to free-form text, some HTML5-based text inputs appear like this.

Check Box

Select this option, confirming that it is correct.

Drop-down List

something 2 3 4 5

Multi-select

1 2 3 4 5

</div

File Upload

</div

Text Area

</div

</div </fieldset </form ## View Online [View the above example in different browser windows.](#) When an input field gains focus, or when an input field is disabled or read-only, Bootstrap has already defined styles for these cases. In bootstrap.css, lines 677 to 697 define styles for focused input boxes and input elements. First, Webkit "outline" was used as the value for ":focus," but now it has been changed to "box-shadow." Here is an example showing how the styles of focused input boxes, read-only input boxes, disabled input boxes, disabled checkboxes, and disabled buttons change. ## Example

Controls Supported by Bootstrap

Focused Input

In addition to free-form text, some HTML5-based text inputs appear like this.

</div

Read-only Input

In addition to free-form text, some HTML5-based text inputs appear like this.

label class="control-label" for "input01">Disabled Input div class="controls"> input type "text" class "input-xlarge" id "input01" with disabled="true"> p class "help-block": In addition to free-form text, some HTML5-based text inputs appear like this. div class "control-group"> label class "control-label" for "optionsCheckbox" reado">Check Box (Disabled) div class "controls": label class "checkbox": input type "checkbox" id "optionsCheckbox" with value "option1" with disabled="true"> Select this option, confirming that it is correct. div class "controls" div class "form-actions": button type "submit" class "btn btn-primary" with disabled="true">Save Changes (Disabled Button)Cancel </fieldset </form ## View Online [View the above example in different browser windows.](#) Bootstrap 2.0 can define styles for error, warning, and success states during form validation. This is a great feature because when users submit form data and encounter errors, or when a warning needs to be issued, or even when users need to be notified that their data has been successfully submitted, different styles must be shown to the user. Here is an example: ## Example

Error, Warning, or Success in Form Validation

label class "control-label" for "inputError">Input Error</label div class "controls": input type "text" id "inputError" span class "help-inline": Please correct the error div class "control-group war

YouTip

Bootstrap V2 Forms

📂 Categories