Bootstrap Form
Brief introduction
In this tutorial, you will learn how to use the Bootstrap 2.0 toolkit to create forms.
Bootstrap already input, textarea and select form controls and other custom styles, support for lists and check boxes for disabling form controls defined styles, including form controls for each error, warning, success status.
From version 2.0 onwards, Bootstrap provides four types of forms in the layout -
- Vertical (default)
- search for
- Inline
- Level
In the previous version of Bootstrap, the form layout is the default horizontal layout. However, from version 2.0 onwards, vertical layout is the default layout.
Create a vertical form layout
The default layout for the form bootstrap.css in .form-vertical class of Bootstrap (ie vertical form) custom styles. However, because it is the default form layout, creating a form layout by default when not required provisions .form-vertical class. The following example demonstrates a Bootstrap 2.0 default form layout created by the form.
.well class is used to create a form of container (of course, it also has other uses). This class can be found in bootstrap.css row number 1650-1663. For this layout, input boxes are block-level (Block Level) . The following example demonstrates how to use Bootstrap to create a default form layout.
Examples
<Label> tag name </ label>
<Input type = "text" class = "span3" placeholder = "Type something ...">
<Span class = "help-inline"> Related Documents Help! </ Span>
<Label class = "checkbox">
<Input type = "checkbox"> select the I
</ Label>
<Button type = "submit" class = "btn"> Submit </ button>
</ Form>
View Online
See examples above in a different browser window.
Create a search form layout
Located bootstrap.css using BOC No. 962-1003 (These lines also contain .form-inline style) of .form-search class, to create a search form. For this layout, input boxes are block-level (Block Level) . Here is an example:
Examples
<Input type = "text" class = "input-medium search-query">
<Button type = "submit" class = "btn"> Search </ button>
</ Form>
View Online
See examples above in a different browser window.
Create an inline form layout
Located bootstrap.css using BOC No. 962-1003 (These lines also contain .form-search style) of .form-inline class, to create an inline form. For this layout, input boxes are inline (the inline) . Here is an example:
Examples
<Input type = "text" class = "input-small" placeholder = "Email">
<Input type = "password" class = "input-small" placeholder = "Password">
<Label class = "checkbox">
<Input type = "checkbox"> Remember me
</ Label>
<Button type = "submit" class = "btn"> Log </ button>
</ Form>
View Online
See examples above in a different browser window.
Create a horizontal form layout
Use bootstrap.css located in .form-horizontal class, to create a horizontal form. For this layout, input boxes are block-level (Block Level) . Here is an example:
Examples
<Fieldset>
<Legend> Bootstrap support controls </ legend>
<Div class = "control-group">
<Label class = "control-label" for = "input01"> Text Input </ label>
<Div class = "controls">
<Input type = "text" class = "input-xlarge" id = "input01">
<P class = "help-block"> In addition to free-form text, some of the HTML5 input text-based presentation like this. </ P>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "optionsCheckbox"> check box </ label>
<Div class = "controls">
<Label class = "checkbox">
<Input type = "checkbox" id = "optionsCheckbox" value = "option1">
Select Options and make sure this is correct.
</ Label>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "select01"> select list </ label>
<Div class = "controls">
<Select id = "select01">
<Option> something </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
<Option> 5 </ option>
</ Select>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "multiSelect"> multiple choice </ label>
<Div class = "controls">
<Select multiple = "multiple" id = "multiSelect">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
<Option> 5 </ option>
</ Select>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "fileInput"> File Upload </ label>
<Div class = "controls">
<Input class = "input-file" id = "fileInput" type = "file">
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "textarea"> text area </ label>
<Div class = "controls">
<Textarea class = "input-xlarge" id = "textarea" rows = "3"> </ textarea>
</ Div>
</ Div>
<Div class = "form-actions">
<Button type = "submit" class = "btn btn-primary"> Save changes </ button>
<Button class = "btn"> Cancel </ button>
</ Div>
</ Fieldset>
</ Form>
View Online
See examples above in a different browser window.
Browser status Bootstrap form controls
When the input field gets focus or input field is disabled or read-only field, Bootstrap has been defined for these styles. In bootstrap.css from the line number 677-697, for the focused input box and input field elements define the style.
First, Webkit "outline" as ": focus" use value, but has now been changed to "box-shadow".
Here is an example, showing the focused input box, how to read only the input box, input box is disabled, the checkbox is disabled and disabled buttons to change the style.
Examples
<Fieldset>
<Legend> Bootstrap support controls </ legend>
<Div class = "control-group">
<Label class = "control-label" for = "input01"> input focus </ label>
<Div class = "controls">
<Input type = "text" class = "input-xlarge" id = "input01">
<P class = "help-block"> In addition to free-form text, some of the HTML5 input text-based presentation like this. </ P>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "input01"> Read-only input </ label>
<Div class = "controls">
<Input type = "text" class = "input-xlarge" id = "input01" readonly = "true">
<P class = "help-block"> In addition to free-form text, some of the HTML5 input text-based presentation like this. </ P>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "input01"> disable input </ label>
<Div class = "controls">
<Input type = "text" class = "input-xlarge" id = "input01" disabled>
<P class = "help-block"> In addition to free-form text, some of the HTML5 input text-based presentation like this. </ P>
</ Div>
</ Div>
<Div class = "control-group">
<Label class = "control-label" for = "optionsCheckbox" reado> check box (disable) </ label>
<Div class = "controls">
<Label class = "checkbox">
<Input type = "checkbox" id = "optionsCheckbox" value = "option1" disabled>
Select Options and make sure this is correct.
</ Label>
</ Div>
</ Div>
<Div class = "form-actions">
<Button type = "submit" class = "btn btn-primary" disabled> to save the changes (the button is disabled) </ button>
<Button class = "btn"> Cancel </ button>
</ Div>
</ Fieldset>
</ Form>
View Online
See examples above in a different browser window.
Define styles for the Forms Authentication
Bootstrap 2.0 verification form for errors, warnings, success status defined styles. This is a nice feature, because when the user submits the form data when an error occurs, or when you need to generate a warning, or even notify the user data has been successfully submitted, you need to show users different styles.
Here's an example:
Examples
<Fieldset>
<Legend> form validation errors, warnings or success </ legend>
<Div class = "control-group error">
<Label class = "control-label" for = "inputError"> typos </ label>
<Div class = "controls">
<Input type = "text" id = "inputError">
<Span class = "help-inline"> Please correct the errors </ span>
</ Div>
</ Div>
<Div class = "control-group warning">
<Label class = "control-label" for = "inputWarning"> Enter Warning </ label>
<Div class = "controls">
<Input type = "text" id = "inputWarning">
<Span class = "help-inline"> some errors </ span>
</ Div>
</ Div>
<Div class = "control-group success">
<Label class = "control-label" for = "inputSuccess"> input success </ label>
<Div class = "controls">
<Input type = "text" id = "inputSuccess">
<Span class = "help-inline"> input success </ span>
</ Div>
</ Div>
<Div class = "control-group success">
<Label class = "control-label" for = "selectError"> choose success </ label>
<Div class = "controls">
<Select id = "selectError">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
<Option> 5 </ option>
</ Select>
<Span class = "help-inline"> choose success </ span>
</ Div>
</ Div>
</ Fieldset>
</ Form>
View Online
See examples above in a different browser window.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.