Forms

Contents

Legend

Remember you can only have one <legend> in each <fieldset>. Multiple <legend>s on the same page must be in separate <fieldset> containers. A good example of this is available in Docs Settings > Websites.

The <strong> tag is needed in order to properly position the heading over the border.


Labels

<label>This is a form label</label>

Controls

Text fields

Fields with a type of color, date, datetime, datetime-local, email, month, number, password, search, tel, time, url and week are also accepted, just not shown here.

If the field is optional, please denote “(optional)” in the placeholder.

<input type="text" name="name" placeholder="Placeholder (optional)">

Uneditable
Uneditable also applies to [disabled] and [readonly] states.

<input type="text" name="name" class="uneditable-input">

Sizes

<input type="text" name="name" class="input-mini" placeholder="Mini">
<input type="text" name="name" class="input-small" placeholder="Small">
<input type="text" name="name" class="input-medium" placeholder="Medium">
<input type="text" name="name" class="input-large" placeholder="Large">
<input type="text" name="name" class="input-xlarge" placeholder="X Large">
<input type="text" name="name" class="input-xxlarge" placeholder="XX Large">

File upload fields

<input type="file" name="name">

Textarea

resize: none is set by default on all textareas

<textarea rows="5"></textarea>

Uneditable

Uneditable also applies to [disabled] and [readonly] states.

<textarea rows="5" class="uneditable-textarea"></textarea>

Select

The disabled/readonly state matches the uneditable state for inputs and textareas. Optionally, input-* classes can be used for sizing.

<select name="name">
  <option>Select one</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Uneditable

<select name="name" class="uneditable-select">
  <option>Select one</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Checkboxes

Checkboxes must be wrapped in a <label>.

<label class="checkbox">
 <input type="checkbox"> checkbox one
</label>
<label class="checkbox">
 <input type="checkbox"> checkbox two
</label>

Inline
For showing checkboxes on the same line

<label class="checkbox inline">
 <input type="checkbox"> checkbox one
</label>
<label class="checkbox inline">
 <input type="checkbox"> checkbox two
</label>

Disabled
Inactive state lightens the label text color

<label class="checkbox inactive">
 <input type="checkbox"> checkbox one
</label>
<label class="checkbox inactive">
 <input type="checkbox"> checkbox two
</label>

Feedback states

Each form row should be wrapped in a .control-group in order to properly show feedback states.

<div class="control-group">
  <label class="control-label">Default</label>
  <input type="text" name="name">
</div>

<div class="control-group warning">
  <label class="control-label">Warning</label>
  <input type="text" name="name">
</div>

<div class="control-group error">
  <label class="control-label">Error</label>
  <input type="text" name="name">
</div>

<div class="control-group success">
  <label class="control-label">Success</label>
  <input type="text" name="name">
</div>

Form Actions

The bottom of each form where settings are saved. The only variations of this code should involve the buttons.

<div class="form-actions">
  <button type="submit" class="btn btn-success">Save changes</button>
  <button type="button" class="btn btn-link">Cancel</button>
</div><!--/form-actions-->

Input group

Use these sparingly, but there are times when it makes sense to group the input with a button. Merging tags in the actions box is a good example.

http://
<div class="input-append">
  <input type="text" name="name">
  <button class="btn btn-success" type="submit"><i class="icon-check"></i></button>
</div><!--/input-append-->
<div class="input-prepend">
  <span class="add-on">http://</span>
  <input type="url" name="url">
</div><!--/input-prepend-->

Horizontal form (default)

This is the default style we use for forms.

This text is helpful.
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="email">Email</label>
    <div class="controls">
      <input type="email" id="email">
      <span class="help-block">This text is helpful.</span>
    </div><!--/controls-->
  </div><!--/control-group-->
  <div class="control-group">
    <div class="controls">
      <label class="checkbox"><input type="checkbox"> This is a checkbox</label>
    </div><!--/controls-->
  </div><!--/control-group-->
  <div class="form-actions">
    <button type="submit" class="btn btn-success">Save</button>
  </div><!--/form-actions-->
</form>

Horizontal form with multi-group

If you want two fields on the same line in a horizontal form, use the .multi-group class to wrap your 2 control-groups.

<form class="form-horizontal">
  <div class="multi-group">
    <div class="control-group">
      <label class="control-label" for="small">Small field</label>
      <div class="controls">
        <input type="text" id="small" class="input-small">
      </div><!--/controls-->
    </div><!--/control-group-->
    <div class="control-group">
      <label class="control-label" for="small2">Small field</label>
      <div class="controls">
        <input type="text" id="small2" class="input-small">
      </div><!--/controls-->
    </div><!--/control-group-->
  </div><!--/multi-group-->
</form>

Inline form

For small edits, like editing an article name/slug, editing a conversation subject, etc. .control-group is not necessary unless you want nice inline validation.

Inline validation here
<form class="form-inline">
  <div class="control-group error">
    <input type="text" class="input-small" placeholder="Email">
    <span class="help-block">Inline validation here</span>
  </div><!--/control-group-->
  <div class="control-group">
    <input type="password" class="input-small" placeholder="Password">
  </div><!--/control-group-->
  <div class="control-group">
    <label class="checkbox">
      <input type="checkbox"> Remember me
    </label>
  </div><!--/control-group-->
  <button type="submit" class="btn btn-success">Sign in</button>
</form>

Search form

For search forms, this is the only spot where we consider using a rounded input. It’s not required though, just depends on the use case.

<form class="quick-search">
  <div class="input-append">
    <input type="text" class="search-query dropdown-toggle" data-toggle="dropdown" placeholder="Quick Search">
    <button type="submit" class="btn">
      <i class="icon-search-sm solo"></i>
    </button>
  </div>
  <span class="help-block">This text is helpful.</span>
</form><!--/form-search-->