Forms

Forms

Examples Requires MAX Custom Bootstrap Stylesheet

Basic Form

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="checkmeout">
    <label for="checkmeout">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form

Add .form-inline to your form (which doesn’t have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

May Require Custom Widths

Inputs and selects have width: 100%; applied by default. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

Always Add Labels

Screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute, but note that use of placeholder as a replacement for other labelling methods is not advised.

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <input type="checkbox" id="remember1">
    <label for="remember1">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontal Form

Add .form-inline to your form (which doesn’t have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <input type="checkbox" id="remember1">
        <label for="remember1">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-primary">Sign in</button>
    </div>
  </div>
</form>

Back to Top

Supported Controls Requires MAX Custom Bootstrap Stylesheet

Input

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

<input type="text" class="form-control" placeholder="Text Input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>

Checkboxes and Radios

Default

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

Option one is this and that—be sure to include why it’s great

Option two is disabled

Option one is this and that—be sure to include why it’s great

Option two can be something else and selecting it will deselect option one

Option three is disabled

<div class="checkbox">
  <input type="checkbox" name="optionsChecks" id="chk1">
  <label for="chk1">Option one is this and that&mdash;be sure to include why it’s great</label>
</div>
<div class="checkbox disabled">
  <input type="checkbox" name="optionsChecks" id="chk2" disabled>
  <label for="chk2">Option two is disabled</label>
</div>

<div class="radio">
  <input type="radio" name="optionsRadios" id="rad1">
  <label for="rad1">Option one is this and that&mdash;be sure to include why it’s great</label>
</div>
<div class="radio">
  <input type="radio" name="optionsRadios" id="rad2">
  <label for="rad2">Option two can be something else and selecting it will deselect option one</label>
</div>
<div class="radio disabled">
  <input type="radio" name="optionsRadios" id="rad3" disabled>
  <label for="rad3">Option three is disabled</label>
</div>

Inline

Add the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

<div class="checkbox checkbox-inline">
  <input type="checkbox" name="inlineChecks" id="ichk1">
  <label for="ichk1">1</label>
</div>
<div class="checkbox checkbox-inline">
  <input type="checkbox" name="inlineChecks" id="ichk2">
  <label for="ichk2">2</label>
</div>
<div class="checkbox checkbox-inline">
  <input type="checkbox" name="inlineChecks" id="ichk3">
  <label for="ichk3">3</label>
</div>

<div class="radio radio-inline">
  <input type="radio" name="inlineRadios" id="irad1">
  <label for="irad1">1</label>
</div>
<div class="radio radio-inline">
  <input type="radio" name="inlineRadios" id="irad2">
  <label for="irad2">2</label>
</div>
<div class="radio radio-inline">
  <input type="radio" name="inlineRadios" id="irad3">
  <label for="irad3">3</label>
</div>

Select

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

Single

Multiple

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>