overhaul forms docs to simplify presentation of everything, reduce text, and increase visibility of examples

1 files changed, 409 insertions, 346 deletions

diff --git a/docs/base-css.html b/docs/base-css.html
index 71f8da87e..0525a9674 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
     <h1>Forms</h1>
   </div>
 
-  <h2>Controls and layouts</h2>
-  <p>Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
-  <p>Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.</p>
-  <p>Error, warning, and success states are included for form controls, as wel as disabled.</p>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Class</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th>Vertical (default)</th>
-        <td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
-        <td>Stacked, left-aligned labels over controls</td>
-      </tr>
-      <tr>
-        <th>Inline</th>
-        <td><code>.form-inline</code></td>
-        <td>Left-aligned label and inline-block controls for compact style</td>
-      </tr>
-      <tr>
-        <th>Search</th>
-        <td><code>.form-search</code></td>
-        <td>Extra-rounded text input for a typical search aesthetic</td>
-      </tr>
-      <tr>
-        <th>Horizontal</th>
-        <td><code>.form-horizontal</code></td>
-        <td>Float left, right-aligned labels on same line as controls</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <h2>Example forms <small>using just form controls, no extra markup</small></h2>
-  <h3>Basic form</h3>
-  <p>Smart and lightweight defaults without extra markup.</p>
+  <h2>Default styles</h2>
+  <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
   <form class="bs-docs-example">
     <label>Label name</label>
-    <input type="text" class="span3" placeholder="Type something…">
+    <input type="text" placeholder="Type something…">
     <p class="help-block">Example block-level help text here.</p>
     <label class="checkbox">
       <input type="checkbox"> Check me out
@@ -761,7 +724,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 <pre class="prettyprint linenums">
 &lt;form class="well"&gt;
   &lt;label&gt;Label name&lt;/label&gt;
-  &lt;input type="text" class="span3" placeholder="Type something…"&gt;
+  &lt;input type="text" placeholder="Type something…"&gt;
   &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
   &lt;label class="checkbox"&gt;
     &lt;input type="checkbox"&gt; Check me out
@@ -770,21 +733,28 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/form&gt;
 </pre>
 
+
+  <hr class="bs-docs-separator"></hr>
+
+
+  <h2>Optional layouts</h2>
+  <p>Included with Bootstrap are three optional form layouts for common use cases.</p>
+
   <h3>Search form</h3>
-  <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
+  <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>&lt;input&gt;</code> for an extra-rounded text input.</p>
   <form class="bs-docs-example form-search">
     <input type="text" class="input-medium search-query">
     <button type="submit" class="btn">Search</button>
   </form>
 <pre class="prettyprint linenums">
-&lt;form class="well form-search"&gt;
+&lt;form class="form-search"&gt;
   &lt;input type="text" class="input-medium search-query"&gt;
   &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
 &lt;/form&gt;
 </pre>
 
   <h3>Inline form</h3>
-  <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
+  <p>Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.</p>
   <form class="bs-docs-example form-inline">
     <input type="text" class="input-small" placeholder="Email">
     <input type="password" class="input-small" placeholder="Password">
@@ -794,7 +764,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
     <button type="submit" class="btn">Sign in</button>
   </form>
 <pre class="prettyprint linenums">
-&lt;form class="well form-inline"&gt;
+&lt;form class="form-inline"&gt;
   &lt;input type="text" class="input-small" placeholder="Email"&gt;
   &lt;input type="password" class="input-small" placeholder="Password"&gt;
   &lt;label class="checkbox"&gt;
@@ -804,331 +774,424 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/form&gt;
 </pre>
 
-  <br>
-
-  <h2>Horizontal forms</h2>
-  <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
+  <h3>Horizontal form</h3>
+  <p>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:</p>
   <ul>
-    <li>text inputs (text, password, email, etc)</li>
-    <li>checkbox</li>
-    <li>radio</li>
-    <li>select</li>
-    <li>multiple select</li>
-    <li>file input</li>
-    <li>textarea</li>
+    <li>Add <code>.form-horizontal</code> to the form</li>
+    <li>Wrap labels and controls in <code>.control-group</code></li>
+    <li>Add <code>.control-label</code> to the label</li>
+    <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
   </ul>
-
-  <form class="form-horizontal">
-    <fieldset>
-      <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 freeform text, any HTML5 text-based input appears like so.</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">
-            Option one is this and that&mdash;be sure to include why it's great
-          </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">Multicon-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 input</label>
-        <div class="controls">
-          <input class="input-file" id="fileInput" type="file">
-        </div>
+  <form class="bs-docs-example form-horizontal">
+    <div class="control-group">
+      <label class="control-label" for="">Email</label>
+      <div class="controls">
+        <input type="text" placeholder="Email">
       </div>
-      <div class="control-group">
-        <label class="control-label" for="textarea">Textarea</label>
-        <div class="controls">
-          <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
-        </div>
+    </div>
+    <div class="control-group">
+      <label class="control-label" for="">Password</label>
+      <div class="controls">
+        <input type="password" placeholder="Password">
       </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">Save changes</button>
-        <button class="btn">Cancel</button>
+    </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>
-    </fieldset>
+    </div>
   </form>
-  <h3>Example markup</h3>
-  <p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
 <pre class="prettyprint linenums">
 &lt;form class="form-horizontal"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Legend text&lt;/legend&gt;
-    &lt;div class="control-group"&gt;
-      &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
-      &lt;div class="controls"&gt;
-        &lt;input type="text" class="input-xlarge" id="input01"&gt;
-        &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
-      &lt;/div&gt;
+  &lt;div class="control-group"&gt;
+    &lt;label class="control-label" for=""&gt;Email&lt;/label&gt;
+    &lt;div class="controls"&gt;
+      &lt;input type="text" placeholder="Email"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="control-group"&gt;
+    &lt;label class="control-label" for=""&gt;Password&lt;/label&gt;
+    &lt;div class="controls"&gt;
+      &lt;input type="password" placeholder="Password"&gt;
     &lt;/div&gt;
-  &lt;/fieldset&gt;
+  &lt;/div&gt;
+  &lt;div class="control-group"&gt;
+    &lt;div class="controls"&gt;
+      &lt;label class="checkbox"&gt;
+        &lt;input type="checkbox"&gt; Remember me
+      &lt;/label&gt;
+      &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
 &lt;/form&gt;
 </pre>
 
-  <br>
 
-  <h2>Form control states</h2>
-  <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
-  <hr>
-  <h3>Form validation</h3>
-  <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
+  <hr class="bs-docs-separator"></hr>
+
+
+  <h2>Supported form controls</h2>
+  <p>Examples of standard form controls supported in an example form layout.</p>
+
+  <h3>Inputs</h3>
+  <p>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.</p>
+  <p>Requires the use of a specified <code>type</code> at all times.</p>
+  <form class="bs-docs-example form-inline">
+    <input type="text" placeholder="Text input">
+  </form>
 <pre class="prettyprint linenums">
-&lt;fieldset
-  class="control-group error"&gt;
-  …
-&lt;/fieldset&gt;
+&lt;input type="text" placeholder="Text input"&gt;
 </pre>
 
-  <form class="form-horizontal">
-    <fieldset>
-      <div class="control-group">
-        <label class="control-label" for="focusedInput">Focused input</label>
-        <div class="controls">
-          <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label">Uneditable input</label>
-        <div class="controls">
-          <span class="input-xlarge uneditable-input">Some value here</span>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="disabledInput">Disabled input</label>
-        <div class="controls">
-          <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
-        <div class="controls">
-          <label class="checkbox">
-            <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
-            This is a disabled checkbox
-          </label>
-        </div>
-      </div>
-      <div class="control-group warning">
-        <label class="control-label" for="inputWarning">Input with warning</label>
-        <div class="controls">
-          <input type="text" id="inputWarning">
-          <span class="help-inline">Something may have gone wrong</span>
-        </div>
-      </div>
-      <div class="control-group error">
-        <label class="control-label" for="inputError">Input with 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 success">
-        <label class="control-label" for="inputSuccess">Input with success</label>
-        <div class="controls">
-          <input type="text" id="inputSuccess">
-          <span class="help-inline">Woohoo!</span>
-        </div>
-      </div>
-      <div class="control-group success">
-        <label class="control-label" for="selectError">Select with success</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">Woohoo!</span>
-        </div>
-      </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">Save changes</button>
-        <button class="btn">Cancel</button>
-      </div>
-    </fieldset>
+  <h3>Textarea</h3>
+  <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
+  <form class="bs-docs-example form-inline">
+    <textarea rows="3"></textarea>
   </form>
+<pre class="prettyprint linenums">
+&lt;textarea id="textarea" rows="3"&gt;&lt;/textarea&gt;
+</pre>
+
+  <h3>Checkboxes and radios</h3>
+  <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
+  <h4>Default (stacked)</h4>
+  <form class="bs-docs-example">
+    <label class="checkbox">
+      <input type="checkbox" value="">
+      Option one is this and that&mdash;be sure to include why it's great
+    </label>
+    <br>
+    <label class="radio">
+      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+      Option one is this and that&mdash;be sure to include why it's great
+    </label>
+    <label class="radio">
+      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+      Option two can be something else and selecting it will deselect option one
+    </label>
+  </form>
+<pre class="prettyprint linenums">
+&lt;label class="checkbox"&gt;
+  &lt;input type="checkbox" value=""&gt;
+  Option one is this and that&mdash;be sure to include why it's great
+&lt;/label&gt;
+
+&lt;label class="radio"&gt;
+  &lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
+  Option one is this and that&mdash;be sure to include why it's great
+&lt;/label&gt;
+&lt;label class="radio"&gt;
+  &lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
+  Option two can be something else and selecting it will deselect option one
+&lt;/label&gt;
+</pre>
+
+  <h4>Inline checkboxes</h4>
+  <p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
+  <form class="bs-docs-example">
+    <label class="checkbox inline">
+      <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+    </label>
+    <label class="checkbox inline">
+      <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+    </label>
+    <label class="checkbox inline">
+      <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+    </label>
+  </form>
+<pre class="prettyprint linenums">
+&lt;label class="checkbox inline"&gt;
+  &lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
+&lt;/label&gt;
+&lt;label class="checkbox inline"&gt;
+  &lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
+&lt;/label&gt;
+&lt;label class="checkbox inline"&gt;
+  &lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
+&lt;/label&gt;
+</pre>
+
+  <h3>Selects</h3>
+  <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
+  <form class="bs-docs-example">
+    <select>
+      <option>something</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+    <br>
+    <select>
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </form>
+<pre class="prettyprint linenums">
+&lt;select&gt;
+  &lt;option&gt;something&lt;/option&gt;
+  &lt;option&gt;2&lt;/option&gt;
+  &lt;option&gt;3&lt;/option&gt;
+  &lt;option&gt;4&lt;/option&gt;
+  &lt;option&gt;5&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;select&gt;
+  &lt;option&gt;1&lt;/option&gt;
+  &lt;option&gt;2&lt;/option&gt;
+  &lt;option&gt;3&lt;/option&gt;
+  &lt;option&gt;4&lt;/option&gt;
+  &lt;option&gt;5&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator"></hr>
 
-  <br>
 
   <h2>Extending form controls</h2>
-  <h3>Prepend &amp; append inputs</h3>
-  <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
-  <hr>
-  <h3>Checkboxes and radios</h3>
-  <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
-  <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
-  <hr>
-  <h4>Inline forms and append/prepend</h4>
-  <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
-  <hr>
-  <h4>Form help text</h4>
-  <p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
-
-  <form class="form-horizontal">
-    <fieldset>
-      <div class="control-group">
-        <label class="control-label">Form grid sizes</label>
-        <div class="controls docs-input-sizes">
-          <input class="span1" type="text" placeholder=".span1">
-          <input class="span2" type="text" placeholder=".span2">
-          <input class="span3" type="text" placeholder=".span3">
-          <select class="span1">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-          <select class="span2">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-          <select class="span3">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-          <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label">Alternate sizes</label>
-        <div class="controls docs-input-sizes">
-          <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">
-          <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="prependedInput">Prepended text</label>
-        <div class="controls">
-          <div class="input-prepend">
-            <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
-          </div>
-          <p class="help-block">Here's some help text</p>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="appendedInput">Appended text</label>
-        <div class="controls">
-          <div class="input-append">
-            <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
-          </div>
-          <span class="help-inline">Here's more help text</span>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="appendedPrependedInput">Append and prepend</label>
-        <div class="controls">
-          <div class="input-prepend input-append">
-            <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
-          </div>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="appendedInputButton">Append with button</label>
-        <div class="controls">
-          <div class="input-append">
-            <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
-          </div>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="appendedInputButtons">Two-button append</label>
-        <div class="controls">
-          <div class="input-append">
-            <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
-          </div>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
-        <div class="controls">
-          <label class="checkbox inline">
-            <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
-          </label>
-          <label class="checkbox inline">
-            <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
-          </label>
-          <label class="checkbox inline">
-            <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
-          </label>
-        </div>
-      </div>
-      <div class="control-group">
-        <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
-        <div class="controls">
-          <label class="checkbox">
-            <input type="checkbox" name="optionsCheckboxList1" value="option1">
-            Option one is this and that&mdash;be sure to include why it's great
-          </label>
-          <label class="checkbox">
-            <input type="checkbox" name="optionsCheckboxList2" value="option2">
-            Option two can also be checked and included in form results
-          </label>
-          <label class="checkbox">
-            <input type="checkbox" name="optionsCheckboxList3" value="option3">
-            Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
-          </label>
-          <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
-        </div>
+  <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
+
+  <h3>Prepended and appended inputs</h3>
+  <p>Add text or buttons before or after any text-based input.</p>
+
+  <h4>Default options</h4>
+  <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
+  <form class="bs-docs-example form-inline">
+    <div class="input-prepend">
+      <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+    </div>
+    <br>
+    <div class="input-append">
+      <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+    </div>
+  </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-prepend"&gt;
+  &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
+&lt;/div&gt;
+&lt;div class="input-append"&gt;
+  &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <h4>Combined</h4>
+  <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
+  <form class="bs-docs-example form-inline">
+    <div class="input-prepend input-append">
+      <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+    </div>
+  </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-prepend input-append"&gt;
+  &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <h4>Buttons instead of text</h4>
+  <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
+  <form class="bs-docs-example">
+    <div class="input-append">
+      <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+    </div>
+    <br>
+    <div class="input-append">
+      <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+    </div>
+  </form>
+<pre class="prettyprint linenums">
+&lt;div class="input-append"&gt;
+  &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="input-append"&gt;
+  &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+  <h3>Control sizing</h3>
+  <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
+
+  <h4>Relative sizing</h4>
+  <form class="bs-docs-example">
+    <div class="controls docs-input-sizes">
+      <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>
+  </form>
+<pre class="prettyprint linenums">
+&lt;input class="input-mini" type="text"&gt;
+&lt;input class="input-small" type="text"&gt;
+&lt;input class="input-medium" type="text"&gt;
+&lt;input class="input-large" type="text"&gt;
+&lt;input class="input-xlarge" type="text"&gt;
+&lt;input class="input-xxlarge" type="text"&gt;
+</pre>
+
+  <h4>Grid sizing</h4>
+  <p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
+  <form class="bs-docs-example">
+    <div class="controls docs-input-sizes">
+      <input class="span1" type="text" placeholder=".span1">
+      <input class="span2" type="text" placeholder=".span2">
+      <input class="span3" type="text" placeholder=".span3">
+      <select class="span1">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+      <select class="span2">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+      <select class="span3">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+      </select>
+    </div>
+  </form>
+<pre class="prettyprint linenums">
+&lt;input class="span1" type="text"&gt;
+&lt;input class="span2" type="text"&gt;
+&lt;input class="span3" type="text"&gt;
+</pre>
+
+  <h3>Uneditable inputs</h3>
+  <p>Present data in a form that's not editable without using actual form markup.</p>
+  <form class="bs-docs-example">
+    <span class="input-xlarge uneditable-input">Some value here</span>
+  </form>
+<pre class="prettyprint linenums">
+  &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
+</pre>
+
+  <h3>Form actions</h3>
+  <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
+  <form class="bs-docs-example">
+    <div class="form-actions">
+      <button type="submit" class="btn btn-primary">Save changes</button>
+      <button class="btn">Cancel</button>
+    </div>
+  </form>
+<pre class="prettyprint linenums">
+&lt;div class="form-actions"&gt;
+  &lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
+  &lt;button class="btn"&gt;Cancel&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+  <h3>Help text</h3>
+  <p>Inline and block level support for help text that appears around form controls.</p>
+  <h4>Inline help</h4>
+  <form class="bs-docs-example form-inline">
+    <input type="text"> <span class="help-inline">Inline help text</span>
+  </form>
+<pre class="prettyprint linenums">
+&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;
+</pre>
+
+  <h4>Block help</h4>
+  <form class="bs-docs-example form-inline">
+    <input type="text">
+    <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+  </form>
+<pre class="prettyprint linenums">
+&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
+</pre>
+
+
+  <hr class="bs-docs-separator"></hr>
+
+
+  <h2>Form control states</h2>
+  <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
+
+  <h3>Input focus</h3>
+  <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+  <form class="bs-docs-example form-inline">
+    <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
+  </form>
+<pre class="prettyprint linenums">
+&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
+</pre>
+
+  <h3>Disabled inputs</h3>
+  <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
+  <form class="bs-docs-example form-inline">
+    <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+  </form>
+<pre class="prettyprint linenums">
+&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
+</pre>
+
+  <h3>Validation states</h3>
+  <p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
+
+  <form class="bs-docs-example form-horizontal">
+    <div class="control-group warning">
+      <label class="control-label" for="inputWarning">Input with warning</label>
+      <div class="controls">
+        <input type="text" id="inputWarning">
+        <span class="help-inline">Something may have gone wrong</span>
       </div>
-      <div class="control-group">
-        <label class="control-label">Radio buttons</label>
-        <div class="controls">
-          <label class="radio">
-            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-            Option one is this and that&mdash;be sure to include why it's great
-          </label>
-          <label class="radio">
-            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-            Option two can be something else and selecting it will deselect option one
-          </label>
-        </div>
+    </div>
+    <div class="control-group error">
+      <label class="control-label" for="inputError">Input with error</label>
+      <div class="controls">
+        <input type="text" id="inputError">
+        <span class="help-inline">Please correct the error</span>
       </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">Save changes</button>
-        <button class="btn">Cancel</button>
+    </div>
+    <div class="control-group success">
+      <label class="control-label" for="inputSuccess">Input with success</label>
+      <div class="controls">
+        <input type="text" id="inputSuccess">
+        <span class="help-inline">Woohoo!</span>
       </div>
-    </fieldset>
+    </div>
   </form>
+<pre class="prettyprint linenums">
+&lt;div class="control-group warning"&gt;
+  &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" id="inputWarning"&gt;
+    &lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group error"&gt;
+  &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" id="inputError"&gt;
+    &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="control-group success"&gt;
+  &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
+  &lt;div class="controls"&gt;
+    &lt;input type="text" id="inputSuccess"&gt;
+    &lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
 </section>