Bootstrap Forms

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap allows you to create various styles of forms with simple HTML tags and extended classes.

Form Layouts

Bootstrap provides the following types of form layouts:

• Vertical form (default)
• Inline form
• Horizontal form

Vertical or Basic Form

The basic form structure comes with Bootstrap, and individual form controls automatically receive some global styling. Below are the steps to create a basic form:

• Add role="form" to the parent <form> element.
• Place labels and controls in a <div> with class .form-group. This is necessary for optimal spacing.
• Add class ="form-control" to all text elements <input>, <textarea>, and <select>.

Example

<form role="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label for="inputfile">File input</label>
    <input type="file" id="inputfile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The result is as shown below:

Inline Form

To create a form where all elements are inline, left-aligned, and labels are alongside, add class .form-inline to the <form> tag.

Example

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">File input</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The result is as shown below:

• By default, Bootstrap's inputs, selects, and textareas have 100% width. When using an inline form, you need to set a width on the form controls.
• Use class .sr-only to hide labels in inline forms.

Horizontal Form

A horizontal form differs not only in the amount of markup but also in the presentation of the form. To create a horizontally laid out form, follow these steps:

• Add class .form-horizontal to the parent <form> element.
• Place labels and controls in a <div> with class .form-group.
• Add class .control-label to the labels.

Example

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="Enter first name">
    </div>
  </div>

The result is as shown below:

<div class="form-group">
  <label for="lastname" class="col-sm-2 control-label">Last Name</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="lastname" placeholder="Enter your last name">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox">Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Log in</button>
  </div>
</div>
</form>

Result as shown below:

Supported Form Controls

Bootstrap supports the most common form controls, mainly input, textarea, checkbox, radio, and select.

Input

The most common form text field is the input field. Users can enter most necessary form data in it. Bootstrap provides support for all native HTML5 input types, including: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. A proper type declaration is required for input to get full styling.

Example

<form role="form">
  <div class="form-group">
    <label for="name">Label</label>
    <input type="text" class="form-control" placeholder="Text input">
  </div>
</form>

Result as shown below:

Textarea

When you need multi-line input, you can use the textarea. The rows attribute can be changed if necessary (fewer rows = smaller box, more rows = larger box).

Example

<form role="form">
  <div class="form-group">
    <label for="name">Textarea</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

Result as shown below:

Checkbox and Radio

Checkboxes and radio buttons are used to allow users to select options from a set of predefined choices.

• Use checkbox when you want the user to select multiple options from a list. Use radio when you want to limit the user to just one option.

• Use .checkbox-inline or .radio-inline classes on a series of checkboxes and radios to control them to display inline.

The following example demonstrates both types (default and inline):

Example

<label for="name">Default Checkbox and Radio Button Example</label>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="radio">
  <label>
    &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
  </label>
</div>
<div class="radio">
  <label>

<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2 - Selecting it will deselect Option 1
</label>
</div>
<label for="name">Inline Checkboxes and Radio Buttons Example</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3
</label>
<label class="radio-inline">
&lt;input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> Option 2
</label>
</div>

Result as shown below:

Select Box

When you want to allow users to select from multiple options but only one option can be selected by default, use a select box.

• Use <select> to display a list of options, typically those that are familiar to users, 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

<form role="form">
<div class="form-group">
<label for="name">Select List</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">Multiple Select List</label>
&lt;select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>

Result as shown below:

Static Controls

When you need to place plain text next to a form label within a horizontal form, use class .form-control-static on a <p>.

Example

<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Please enter password">
</div>
</div>
</form>

The results are as follows:

Form Control States

In addition to the :focus state (i.e., when the user clicks on the input or focuses on it using the tab key), Bootstrap defines styles for disabled inputs and provides classes for form validation.

Input Focus

When the input receives :focus, the outline of the input is removed, and a box-shadow is applied.

Disabled Input

To disable an input, simply add the disabled attribute, which not only disables the input but also changes its style and the style of the mouse pointer when hovering over the element.

Disabled Fieldset

Adding the disabled attribute to a <fieldset> disables all controls within the <fieldset>.

Validation States

Bootstrap includes validation styles for error, warning, and success messages. Simply add the appropriate class (e.g., .has-warning, .has-error, or .has-success) to the parent element to use validation states.

The following example demonstrates all control states:

Example

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="This input is focused...">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      &lt;input class="form-control" id="disabledInput" type="text" placeholder="This input is disabled..." disabled>
    </div>
  </div>
  &lt;fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Disabled Input (Fieldset disabled)</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">Disabled Select Menu (Fieldset disabled)</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success">
    <label class="col-sm-2 control-label" for="inputSuccess">Input Success</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
    </div>
  </div>
  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">Input Warning</label>

<div class="col-sm-10">
  <input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
  <label class="col-sm-2 control-label" for="inputError">Input Error</label>
  <div class="col-sm-10">
    <input type="text" class="form-control" id="inputError">
  </div>
</div>
</form>

Result as shown below:

Form Control Sizing

You can set heights and widths of forms using class .input-lg and .col-lg-* respectively. The following example demonstrates this:

Example

<form role="form">
  <div class="form-group">
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
  </div>
  <div class="form-group"></div>
  <div class="form-group">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control">
      <option value="">Default select</option>
    </select>
  </div>
  <div class="form-group">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
</form>

Result as shown below:

Form Help Text

Bootstrap form controls can have a block level help text that sits underneath the input field. To add a full-width block of content, use .help-block after the <input>. The following example demonstrates this:

Example

<form role="form">
  <span>Help text example</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>

Result as shown below: