YouTip

# Bootstrap Forms In this chapter, we will learn how to create forms using Bootstrap. Bootstrap allows you to create different styles of forms with simple HTML tags and extended classes. Bootstrap provides the following types of form layouts: * Vertical form (default) * Inline form * Horizontal form ### Vertical or Basic Form The basic form structure is built into Bootstrap, and individual form controls automatically receive some global styles. Below are the steps to create a basic form: * Add `role="form"` to the parent `` element. * Place the label and control inside a ` [Try it »](#) The result is as follows:  ### Checkbox and Radio Checkboxes and radio buttons are used to let users choose from a series of preset options. * When creating a form, if you want users to select multiple options from a list, use `checkbox`. If you want to limit users to selecting only one option, use `radio`. * Use the `.checkbox-inline` or `.radio-inline` class for a series of checkboxes and radio buttons to control them to display on the same line. The following example demonstrates both types (default and inline): ## Example Default Checkbox and Radio ButtonsInline Checkbox and Radio Buttons [Try it »](#) The result is as follows:  ### Select When you want users to choose from multiple options but only one option can be selected by default, use the select. * Use `` to display list options, typically those that users are familiar with, such as states or numbers. * Use `multiple="multiple"` to allow users to select multiple options. The following example demonstrates both types (select and multiple): ## Example [Try it »](#) The result is as follows:  When you need to place plain text after a form label within a horizontal form, use the class `.form-control-static` on the `

`. ## Example

[Try it »](#) The result is as follows:  In addition to the `:focus` state (i.e., when a user clicks an input or uses the tab key to focus on it), Bootstrap also defines styles for disabled inputs and provides classes for form validation. ### Input Focus When an input receives `:focus`, the outline of the input is removed, and a `box-shadow` is applied. ### Disabled Input If you want to disable an input, simply add the `disabled` attribute. This not only disables the input but also changes the style of the input and the cursor style when the mouse pointer hovers over the element. ### Disabled Fieldset Add the `disabled` attribute to the `

` to disable all controls within it. ### Validation States Bootstrap includes validation styles for error, warning, and success messages. Simply add the appropriate class (`.has-warning`, `.has-error`, or `.has-success`) to the parent element to use validation states. The following example demonstrates all control states: ## Example

Focused

Disabled

Disabled input (Fieldset disabled)

Disabled select menu (Fieldset disabled)

Disabled select

Input with success

Input with warning

Input with error

[Try it »](#) The result is as follows:  You can use the classes `.input-lg` and `.col-lg-*` to set the height and width of the form, respectively. The following example demonstrates this: ## Example

.input-lg

Default select

.input-sm

[Try it »](#) The result is as follows:  Bootstrap form controls can have block-level help text on inputs. To add a content block that spans the entire width, use `.help-block` after the ``. The following example demonstrates this: ## Example Help text exampleA longer block of help text that breaks onto a new line and may extend beyond one line. This help text in the example has two lines total. [Try it »](#) The result is as follows: