Bootstrap Forms

Introduction

In this tutorial, you will learn how to use the Bootstrap 2.0 toolkit to create forms.

Bootstrap has defined styles for form controls such as input, textarea, and select, supports lists and checkboxes, defines styles for disabled form controls, including error, warning, and success states for each form control.

Since version 2.0, Bootstrap provides four types of form layouts -

  • Vertical (default)
  • Search
  • Inline
  • Horizontal

In previous versions of Bootstrap, the default form layout was horizontal. However, since version 2.0, vertical layout is the default.

Creating Vertical Form Layout

The default Bootstrap form layout (i.e., the vertical form) is styled via the .form-vertical class in bootstrap.css. But since it is the default form layout, you do not need to specify the .form-vertical class when creating a form with the default layout. The following example demonstrates a form created with the Bootstrap 2.0 default form layout.

The .well class is used to create a container for the form (of course, it has other uses). This class can be found at lines 1650 to 1663 in bootstrap.css. For this layout, input fields areblock-level (block level). The following example demonstrates how to use Bootstrap to create a default form layout.

Example

<form class="well">
<label>Label Name</label>
    <input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">Related help documentation!</span>
    <label class="checkbox">
<input type="checkbox"> Check me
    </label>
<button type="submit" class="btn">Submit</button>
</form>

View Online

View the above example in a different browser window.

Creating Search Form Layout

Use the .form-search class, located at lines 962 to 1003 in bootstrap.css (these lines also contain the styles for .form-inline), to create a search form. For this layout, input fields areblock-level (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>

View Online

View the above example in a different browser window.

Creating Inline Form Layout

Use the .form-inline class, located at lines 962 to 1003 in bootstrap.css (these lines also contain the styles for .form-search), to create an inline form. For this layout, input fields areinline. 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">Log in</button>
</form>

View Online

View the above example in a different browser window.

Creating Horizontal Form Layout

Use the .form-horizontal class in bootstrap.css to create a horizontal form. For this layout, the input boxes areblock level. Here 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-based text inputs render 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 item 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>
        <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 above example in different browser windows.

Browser States of Bootstrap Form Controls

When an input field gets focus, or an input field is disabled, or a field is read-only, Bootstrap has already defined styles for these. In bootstrap.css, from line 677 to 697, styles are defined for focused input boxes and input field elements.

Initially, Webkit "outline" was used as the value of ":focus", but now it has changed to "box-shadow".

The following is an example showing how the styles of a focused input, a read-only input, a disabled input, a disabled checkbox, and a disabled button change.

Example

<form class="form-horizontal">
    <fieldset>
<legend>Controls supported by Bootstrap</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-based text inputs render 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-based text inputs render 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-based text inputs render 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>
Check the option to confirm this item is correct.
                </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 above example in different browser windows.

Defining Styles for Form Validation

Bootstrap 2.0 can define styles for error, warning, and success states when validating forms. This is a great feature, because when errors occur when users submit form data, or when a warning needs to be generated, or even when notifying users that data has been submitted successfully, different styles need to be displayed to users.

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">Selection successful</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">Selection successful</span>
            </div>
        </div>
    </fieldset>
</form>

View Online

View the above example in different browser windows.

Click here to download all HTML, CSS, JS, and image files used in this tutorial.

Other extensions