Bootstrap Forms
Introduction
In this tutorial, you will learn how to create forms using the Bootstrap 2.0 toolkit.
Bootstrap has predefined styles for form controls like input, textarea, and select, supports lists and checkboxes, defines styles for disabled form controls, and includes error, warning, and success states for each form control.
Since version 2.0, Bootstrap offers four types of form layouts:
- Vertical (default)
- Search
- Inline
- Horizontal
In previous versions of Bootstrap, the form layout was horizontal by default. However, since version 2.0, the vertical layout is the default.
Creating a Vertical Form Layout
Bootstrap defines the default form layout (i.e., vertical form) with the .form-vertical class in bootstrap.css. But since this is the default form layout, you do not need to specify the .form-vertical class when creating forms with the default layout. The following example demonstrates a form created with Bootstrap 2.0's default form layout.
The .well class is used to create a container for the form (though it has other uses as well). This class can be found in bootstrap.css from line 1650 to 1663. For this layout, the input fields are block-level. The following example shows how to create a default form layout using Bootstrap.
Example
<form class="well">
<label>Label Name</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">Relevant help text!</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
Live Demo
View the above example in different browser windows.
Creating a Search Form Layout
Use the .form-search class, located in bootstrap.css from line 962 to 1003 (these lines also contain the styles for .form-inline), to create a search form. For this layout, the input fields are block-level. Here is an example:
Example
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
Live Demo
View the above example in different browser windows.
Creating an Inline Form Layout
Use the .form-inline class, located in bootstrap.css from line 962 to 1003 (these lines also contain the styles for .form-search), to create an inline form. For this layout, the input fields are inline. Here is an example:
Example
<form class="well form-inline">
<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">Sign in</button>
</form>
Live Demo
View the above example in different browser windows.
Creating a Horizontal Form Layout
Use the .form-horizontal class from bootstrap.css to create a horizontal form. For this layout, the input fields are block-level. Below is an example:
Example
<form class="form-horizontal">
<fieldset>
<legend>Controls supported by Bootstrap</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 HTML5 text-based inputs are rendered like this.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
Check the option to confirm 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 select</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>
</fieldset>
</form>
<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
View the example above in a different browser window.
Bootstrap Form Controls Browser States
Bootstrap has defined styles for input fields when they receive focus, are disabled, or are read-only. From line number 677 to 697 in bootstrap.css, styles are defined for focused input boxes and input fields.
First, the Webkit "outline" is used as the value for ":focus", but it has now been changed to "box-shadow".
Below is an example showing how the styles change for a focused input box, a read-only input box, a disabled input box, a disabled checkbox, and a disabled button.
Example
<form class="form-horizontal">
<fieldset>
<legend>Controls Bootstrap Supports</legend>
<div class="control-group">
<label class="control-label" for="input01">Focused Input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">In addition to free-form text, some HTML5 text-based inputs are rendered 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 HTML5 text-based inputs are rendered like this.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Disabled 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 HTML5 text-based inputs are rendered like this.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox" reado>Checkbox (Disabled)</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1" disabled>
Select the option to confirm its correctness.
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" disabled>Save Changes (Disabled Button)</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
View Online
View the example above in a different browser window.
Define Styles for Form Validation
Bootstrap 2.0 can define styles for error, warning, and success states during form validation. This is a great feature, as it allows different styles to be displayed to the user when there is an error in the form data submission, when a warning needs to be generated, or even when the user has successfully submitted the data.
Here is an example:
Example
<form class="form-horizontal">
<fieldset>
<legend>Form Validation Error, Warning, or Success</legend>
<div class="control-group error">
<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</span>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input Warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Some errors occurred</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Successful Input</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Successful input</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">Successful Selection</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">Successful selection</span>
</div>
</div>
</fieldset>
</form>
View Online
View the above example in a different browser window.
Click here to download all the HTML, CSS, JS, and image files used in this tutorial.