---
layout: default
title:  "Forms"
date:   2013-05-17 23:24:04
---

Forms
======

Elements
--------

### Input

Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Requires the use of a specified type at all times.

<div class="example">
<input type="text" placeholder="Text input">
</div>

~~~html
<input type="text" placeholder="Text input">
~~~

### Textarea

Change rows attribute as necessary.

<div class="example">
<textarea rows="3"></textarea>
</div>

~~~html
<textarea rows="3"></textarea>
~~~

### Checkbox

Checkboxes will stack on top of each other.

<div class="example">
<label class="checkbox">
  <input type="checkbox" value="">Option
</label>
<label class="checkbox">
  <input type="checkbox" value="">Option
</label>
</div>

~~~html
<label class="checkbox">
  <input type="checkbox" value="">Option
</label>
<label class="checkbox">
  <input type="checkbox" value="">Option
</label>
~~~

Add the class `.inline` to enable inline flow.

<div class="example">
<label class="checkbox inline">
  <input type="checkbox" value="option1"> Option
</label>
<label class="checkbox inline">
  <input type="checkbox" value="option2"> Option
</label>
</div>

~~~html
<label class="checkbox inline">
  <input type="checkbox" value="option1"> Option
</label>
<label class="checkbox inline">
  <input type="checkbox" value="option2"> Option
</label>
~~~

### Radio

Radio boxes works in the exact same way as checkboxes.

### Select

Specify a multiple="multiple" to show multiple options at once.

<div class="example">
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

~~~html
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
~~~



Default Style
-------------

Without any added classes, forms will be styled in a classic, unobtrusive style.

<div class="example">
<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>
</div>

~~~html
<form>
  <fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
  </fieldset>
</form>
~~~


Inline Style
---------------

Add `.form-inline` for left-aligned labels and inline-block controls for a compact layout.

<div class="example">
<form class="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>
</div>

~~~html
<form class="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>
~~~

Horizontal Style
----------------

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

* Add .form-horizontal to the form
* Wrap labels and controls in .control-group
* Add .control-label to the label
* Wrap any associated controls in .controls for proper alignment

<div class="example">
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>
</div>

~~~html
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>
~~~

Grid Sizing
-----------

You can use `.span1` to `.span12` for inputs that match the same sizes of the grid columns.

<div class="example">
	<input class="span1" type="text" placeholder=".span1">
	<input class="span2" type="text" placeholder=".span2">
	<input class="span3" type="text" placeholder=".span3">
</div>

~~~html
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
~~~

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.

<div class="example">
	<div class="controls">
  	<input class="span7" type="text" placeholder=".span7">
	</div>
	<div class="controls controls-row">
	  <input class="span4" type="text" placeholder=".span4">
	  <input class="span2" type="text" placeholder=".span2">
	  <input class="span1" type="text" placeholder=".span1">
	</div>
</div>

~~~html
<div class="controls">
	<input class="span7" type="text" placeholder=".span7">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span2" type="text" placeholder=".span2">
  <input class="span1" type="text" placeholder=".span1">
</div>
~~~

Relative Sizing
---------------

You can relatively size input fields by using the `.input-[size]` classes.

<div class="example">
	<input class="input-mini" type="text" placeholder=".input-mini">
	<input class="input-small" type="text" placeholder=".input-small">
	<input class="input-medium" type="text" placeholder=".input-medium">
	<input class="input-large" type="text" placeholder=".input-large">
	<input class="input-xlarge" type="text" placeholder=".input-xlarge">
	<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</div>

~~~html
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
~~~

Prepend & Append
----------------

Wrap an .add-on and an input with one of two classes to prepend or append text to an input. You can use both at the same time to show on both sides.

<div class="example">
	<div class="input-prepend">
  	<span class="add-on">@</span>
  	<input class="span2" type="text" placeholder="Username">
	</div>
	<div class="input-append">
	  <input class="span2" type="text">
	  <span class="add-on">.00</span>
	</div>
	<div class="input-prepend input-append">
	  <span class="add-on">$</span>
	  <input class="span2" type="text">
	  <span class="add-on">.00</span>
	</div>
</div>

~~~html
<div class="input-prepend">
	<span class="add-on">@</span>
	<input class="span2" type="text" placeholder="Username">
</div>
<div class="input-append">
  <input class="span2" type="text">
  <span class="add-on">.00</span>
</div>
<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" type="text">
  <span class="add-on">.00</span>
</div>
~~~

You can also use buttons as prepend/append elements.

<div class="example">
	<div class="input-append">
	  <input class="span2" type="text">
	  <button class="btn" type="button">Go!</button>
	</div>
</div>

~~~html
<div class="example">
	<div class="input-append">
	  <input class="span2" type="text">
	  <button class="btn" type="button">Go!</button>
	</div>
</div>
~~~

Even two buttons

<div class="example">
	<div class="input-append">
	  <input class="span2" type="text">
	  <button class="btn" type="button">Search</button>
	  <button class="btn" type="button">Options</button>
	</div>
</div>

~~~html
<div class="input-append">
  <input class="span2" type="text">
  <button class="btn" type="button">Search</button>
  <button class="btn" type="button">Options</button>
</div>
~~~


Help Text
---------

You can create inline helper text.

<div class="example">
	<input type="text"><span class="help-inline">Inline text</span>
</div>

~~~html
<input type="text"><span class="help-inline">Inline text</span>
~~~

And you can create block helper text.

<div class="example">
	<input type="text"><span class="help-block">Long text <a href="#">with a link</a> ...</span>
</div>

~~~html
<input type="text"><span class="help-block">Long text <a href="#">with a link</a> ...</span>
~~~


Disable
-------

Disable an input field by using the `disabled` attribute, or create something that looks like a form element, but isn't by using the `.uneditable-input` class.

<div class="example">
	<input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
	<span class="input-xlarge uneditable-input">Disabled fake input</span>
</div>

~~~html
<input class="input-xlarge" type="text" placeholder="Disabled input" disabled>
<span class="input-xlarge uneditable-input">Disabled fake input</span>
~~~