<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><form></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
<pre class="prettyprint linenums">
<form class="well">
<label>Label name</label>
- <input type="text" class="span3" placeholder="Type something…">
+ <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
</form>
</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><input></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">
-<form class="well form-search">
+<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
</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">
<button type="submit" class="btn">Sign in</button>
</form>
<pre class="prettyprint linenums">
-<form class="well form-inline">
+<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
</form>
</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—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">
<form class="form-horizontal">
- <fieldset>
- <legend>Legend text</legend>
- <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">Supporting help text</p>
- </div>
+ <div class="control-group">
+ <label class="control-label" for="">Email</label>
+ <div class="controls">
+ <input type="text" placeholder="Email">
+ </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label" for="">Password</label>
+ <div class="controls">
+ <input type="password" placeholder="Password">
</div>
- </fieldset>
+ </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>
</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">
-<fieldset
- class="control-group error">
- …
-</fieldset>
+<input type="text" placeholder="Text input">
</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">
+<textarea id="textarea" rows="3"></textarea>
+</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—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—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">
+<label class="checkbox">
+ <input type="checkbox" value="">
+ Option one is this and that—be sure to include why it's great
+</label>
+
+<label class="radio">
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ Option one is this and that—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>
+</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">
+<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>
+</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">
+<select>
+ <option>something</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+<select>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+</pre>
+
+
+ <hr class="bs-docs-separator"></hr>
- <br>
<h2>Extending form controls</h2>
- <h3>Prepend & append inputs</h3>
- <p>Input groups—with appended or prepended text—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><label class="checkbox"></code> that wraps the <code><input type="checkbox"></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><span class="help-inline"></code> or a help text block with <code><p class="help-block"></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—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—yes, you guessed it—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">
+<div class="input-prepend">
+ <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+ <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+</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">
+<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>
+</pre>
+
+ <h4>Buttons instead of text</h4>
+ <p>Instead of a <code><span></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">
+<div class="input-append">
+ <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<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>
+</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">
+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+</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">
+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+</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">
+ <span class="input-xlarge uneditable-input">Some value here</span>
+</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">
+<div class="form-actions">
+ <button type="submit" class="btn btn-primary">Save changes</button>
+ <button class="btn">Cancel</button>
+</div>
+</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">
+<span class="help-inline">Inline help text</span>
+</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">
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+</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">
+<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+</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">
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+</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—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">
+<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>
+</pre>
+
</section>
<h1>{{_i}}Forms{{/i}}</h1>
</div>
- <h2>{{_i}}Controls and layouts{{/i}}</h2>
- <p>{{_i}}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.{{/i}}</p>
- <p>{{_i}}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.{{/i}}</p>
- <p>{{_i}}Error, warning, and success states are included for form controls, as wel as disabled.{{/i}}</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th>{{_i}}Name{{/i}}</th>
- <th>{{_i}}Class{{/i}}</th>
- <th>{{_i}}Description{{/i}}</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>{{_i}}Vertical (default){{/i}}</th>
- <td><code>.form-vertical</code> <span class="muted">({{_i}}not required{{/i}})</span></td>
- <td>{{_i}}Stacked, left-aligned labels over controls{{/i}}</td>
- </tr>
- <tr>
- <th>{{_i}}Inline{{/i}}</th>
- <td><code>.form-inline</code></td>
- <td>{{_i}}Left-aligned label and inline-block controls for compact style{{/i}}</td>
- </tr>
- <tr>
- <th>{{_i}}Search{{/i}}</th>
- <td><code>.form-search</code></td>
- <td>{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}</td>
- </tr>
- <tr>
- <th>{{_i}}Horizontal{{/i}}</th>
- <td><code>.form-horizontal</code></td>
- <td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
- </tr>
- </tbody>
- </table>
-
- <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
- <h3>{{_i}}Basic form{{/i}}</h3>
- <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
+ <h2>{{_i}}Default styles{{/i}}</h2>
+ <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
<form class="bs-docs-example">
<label>{{_i}}Label name{{/i}}</label>
- <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
+ <input type="text" placeholder="{{_i}}Type something…{{/i}}">
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
<label class="checkbox">
<input type="checkbox"> {{_i}}Check me out{{/i}}
<pre class="prettyprint linenums">
<form class="well">
<label>{{_i}}Label name{{/i}}</label>
- <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
+ <input type="text" placeholder="{{_i}}Type something…{{/i}}">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> {{_i}}Check me out{{/i}}
</form>
</pre>
+
+ <hr class="bs-docs-separator"></hr>
+
+
+ <h2>{{_i}}Optional layouts{{/i}}</h2>
+ <p>{{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}</p>
+
<h3>{{_i}}Search form{{/i}}</h3>
- <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
+ <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.{{/i}}</p>
<form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>{{! /example }}
<pre class="prettyprint linenums">
-<form class="well form-search">
+<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>
</pre>
<h3>{{_i}}Inline form{{/i}}</h3>
- <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
+ <p>{{_i}}Add <code>.form-inline</code> for left-aligned labels and inline-block controls for a compact layout.{{/i}}</p>
<form class="bs-docs-example form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>{{! /example }}
<pre class="prettyprint linenums">
-<form class="well form-inline">
+<form class="form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox">
</form>
</pre>
- <br>
-
- <h2>{{_i}}Horizontal forms{{/i}}</h2>
- <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
+ <h3>{{_i}}Horizontal form{{/i}}</h3>
+ <p>{{_i}}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:{{/i}}</p>
<ul>
- <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
- <li>{{_i}}checkbox{{/i}}</li>
- <li>{{_i}}radio{{/i}}</li>
- <li>{{_i}}select{{/i}}</li>
- <li>{{_i}}multiple select{{/i}}</li>
- <li>{{_i}}file input{{/i}}</li>
- <li>{{_i}}textarea{{/i}}</li>
+ <li>{{_i}}Add <code>.form-horizontal</code> to the form{{/i}}</li>
+ <li>{{_i}}Wrap labels and controls in <code>.control-group</code>{{/i}}</li>
+ <li>{{_i}}Add <code>.control-label</code> to the label{{/i}}</li>
+ <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
</ul>
-
- <form class="form-horizontal">
- <fieldset>
- <div class="control-group">
- <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
- <div class="controls">
- <input type="text" class="input-xlarge" id="input01">
- <p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox" id="optionsCheckbox" value="option1">
- {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
- </label>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="select01">{{_i}}Select list{{/i}}</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">{{_i}}Multicon-select{{/i}}</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">{{_i}}File input{{/i}}</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="">{{_i}}Email{{/i}}</label>
+ <div class="controls">
+ <input type="text" placeholder="{{_i}}Email{{/i}}">
</div>
- <div class="control-group">
- <label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
- <div class="controls">
- <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
- </div>
+ </div>
+ <div class="control-group">
+ <label class="control-label" for="">{{_i}}Password{{/i}}</label>
+ <div class="controls">
+ <input type="password" placeholder="{{_i}}Password{{/i}}">
</div>
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
- <button class="btn">{{_i}}Cancel{{/i}}</button>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <label class="checkbox">
+ <input type="checkbox"> {{_i}}Remember me{{/i}}
+ </label>
+ <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</div>
- </fieldset>
+ </div>
</form>
- <h3>{{_i}}Example markup{{/i}}</h3>
- <p>{{_i}}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.{{/i}}</p>
<pre class="prettyprint linenums">
<form class="form-horizontal">
- <fieldset>
- <legend>{{_i}}Legend text{{/i}}</legend>
- <div class="control-group">
- <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
- <div class="controls">
- <input type="text" class="input-xlarge" id="input01">
- <p class="help-block">{{_i}}Supporting help text{{/i}}</p>
- </div>
+ <div class="control-group">
+ <label class="control-label" for="">{{_i}}Email{{/i}}</label>
+ <div class="controls">
+ <input type="text" placeholder="{{_i}}Email{{/i}}">
</div>
- </fieldset>
+ </div>
+ <div class="control-group">
+ <label class="control-label" for="">{{_i}}Password{{/i}}</label>
+ <div class="controls">
+ <input type="password" placeholder="{{_i}}Password{{/i}}">
+ </div>
+ </div>
+ <div class="control-group">
+ <div class="controls">
+ <label class="checkbox">
+ <input type="checkbox"> {{_i}}Remember me{{/i}}
+ </label>
+ <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
+ </div>
+ </div>
</form>
</pre>
- <br>
- <h2>{{_i}}Form control states{{/i}}</h2>
- <p>{{_i}}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>.{{/i}}</p>
- <hr>
- <h3>{{_i}}Form validation{{/i}}</h3>
- <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
+ <hr class="bs-docs-separator"></hr>
+
+
+ <h2>{{_i}}Supported form controls{{/i}}</h2>
+ <p>{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}</p>
+
+ <h3>{{_i}}Inputs{{/i}}</h3>
+ <p>{{_i}}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.{{/i}}</p>
+ <p>{{_i}}Requires the use of a specified <code>type</code> at all times.{{/i}}</p>
+ <form class="bs-docs-example form-inline">
+ <input type="text" placeholder="Text input">
+ </form>
<pre class="prettyprint linenums">
-<fieldset
- class="control-group error">
- …
-</fieldset>
+<input type="text" placeholder="Text input">
</pre>
- <form class="form-horizontal">
- <fieldset>
- <div class="control-group">
- <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
- <div class="controls">
- <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
- </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">{{_i}}Disabled input{{/i}}</label>
- <div class="controls">
- <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="optionsCheckbox2">{{_i}}Disabled checkbox{{/i}}</label>
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
- {{_i}}This is a disabled checkbox{{/i}}
- </label>
- </div>
- </div>
- <div class="control-group warning">
- <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
- <div class="controls">
- <input type="text" id="inputWarning">
- <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
- </div>
- </div>
- <div class="control-group error">
- <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
- <div class="controls">
- <input type="text" id="inputError">
- <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
- </div>
- </div>
- <div class="control-group success">
- <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
- <div class="controls">
- <input type="text" id="inputSuccess">
- <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
- </div>
- </div>
- <div class="control-group success">
- <label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</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">{{_i}}Woohoo!{{/i}}</span>
- </div>
- </div>
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
- <button class="btn">{{_i}}Cancel{{/i}}</button>
- </div>
- </fieldset>
+ <h3>{{_i}}Textarea{{/i}}</h3>
+ <p>{{_i}}Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.{{/i}}</p>
+ <form class="bs-docs-example form-inline">
+ <textarea rows="3"></textarea>
</form>
+<pre class="prettyprint linenums">
+<textarea id="textarea" rows="3"></textarea>
+</pre>
+
+ <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
+ <p>{{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}</p>
+ <h4>{{_i}}Default (stacked){{/i}}</h4>
+ <form class="bs-docs-example">
+ <label class="checkbox">
+ <input type="checkbox" value="">
+ {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+ </label>
+ <br>
+ <label class="radio">
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+ </label>
+ <label class="radio">
+ <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
+ </label>
+ </form>
+<pre class="prettyprint linenums">
+<label class="checkbox">
+ <input type="checkbox" value="">
+ {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+
+<label class="radio">
+ <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+ {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+<label class="radio">
+ <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+ {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
+</label>
+</pre>
+
+ <h4>{{_i}}Inline checkboxes{{/i}}</h4>
+ <p>{{_i}}Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.{{/i}}</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">
+<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>
+</pre>
+
+ <h3>{{_i}}Selects{{/i}}</h3>
+ <p>{{_i}}Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.{{/i}}</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">
+<select>
+ <option>something</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+
+<select>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+</select>
+</pre>
+
+
+ <hr class="bs-docs-separator"></hr>
- <br>
<h2>{{_i}}Extending form controls{{/i}}</h2>
- <h3>{{_i}}Prepend & append inputs{{/i}}</h3>
- <p>{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
- <hr>
- <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
- <p>{{_i}}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><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.{{/i}}</p>
- <p>{{_i}}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.{{/i}}</p>
- <hr>
- <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
- <p>{{_i}}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.{{/i}}</p>
- <hr>
- <h4>{{_i}}Form help text{{/i}}</h4>
- <p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p>
-
- <form class="form-horizontal">
- <fieldset>
- <div class="control-group">
- <label class="control-label">{{_i}}Form grid sizes{{/i}}</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">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label">{{_i}}Alternate sizes{{/i}}</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">{{_i}}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>).{{/i}}</p>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
- <div class="controls">
- <div class="input-prepend">
- <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
- </div>
- <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</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">{{_i}}Here's more help text{{/i}}</span>
- </div>
- </div>
- <div class="control-group">
- <label class="control-label" for="appendedPrependedInput">{{_i}}Append and prepend{{/i}}</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">{{_i}}Append with button{{/i}}</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">{{_i}}Two-button append{{/i}}</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">{{_i}}Inline checkboxes{{/i}}</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">{{_i}}Checkboxes{{/i}}</label>
- <div class="controls">
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxList1" value="option1">
- {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
- </label>
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxList2" value="option2">
- {{_i}}Option two can also be checked and included in form results{{/i}}
- </label>
- <label class="checkbox">
- <input type="checkbox" name="optionsCheckboxList3" value="option3">
- {{_i}}Option three can—yes, you guessed it—also be checked and included in form results{{/i}}
- </label>
- <p class="help-block">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p>
- </div>
+ <p>{{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}</p>
+
+ <h3>{{_i}}Prepended and appended inputs{{/i}}</h3>
+ <p>{{_i}}Add text or buttons before or after any text-based input.{{/i}}</p>
+
+ <h4>{{_i}}Default options{{/i}}</h4>
+ <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</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="{{_i}}Username{{/i}}">
+ </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">
+<div class="input-prepend">
+ <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+</div>
+<div class="input-append">
+ <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+</pre>
+
+ <h4>{{_i}}Combined{{/i}}</h4>
+ <p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</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">
+<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>
+</pre>
+
+ <h4>{{_i}}Buttons instead of text{{/i}}</h4>
+ <p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</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">
+<div class="input-append">
+ <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<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>
+</pre>
+
+ <h3>{{_i}}Control sizing{{/i}}</h3>
+ <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
+
+ <h4>{{_i}}Relative sizing{{/i}}</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">
+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+</pre>
+
+ <h4>{{_i}}Grid sizing{{/i}}</h4>
+ <p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</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">
+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+</pre>
+
+ <h3>{{_i}}Uneditable inputs{{/i}}</h3>
+ <p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p>
+ <form class="bs-docs-example">
+ <span class="input-xlarge uneditable-input">Some value here</span>
+ </form>
+<pre class="prettyprint linenums">
+ <span class="input-xlarge uneditable-input">Some value here</span>
+</pre>
+
+ <h3>{{_i}}Form actions{{/i}}</h3>
+ <p>{{_i}}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.{{/i}}</p>
+ <form class="bs-docs-example">
+ <div class="form-actions">
+ <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
+ <button class="btn">{{_i}}Cancel{{/i}}</button>
+ </div>
+ </form>
+<pre class="prettyprint linenums">
+<div class="form-actions">
+ <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
+ <button class="btn">{{_i}}Cancel{{/i}}</button>
+</div>
+</pre>
+
+ <h3>{{_i}}Help text{{/i}}</h3>
+ <p>{{_i}}Inline and block level support for help text that appears around form controls.{{/i}}</p>
+ <h4>{{_i}}Inline help{{/i}}</h4>
+ <form class="bs-docs-example form-inline">
+ <input type="text"> <span class="help-inline">Inline help text</span>
+ </form>
+<pre class="prettyprint linenums">
+<span class="help-inline">Inline help text</span>
+</pre>
+
+ <h4>{{_i}}Block help{{/i}}</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">
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+</pre>
+
+
+ <hr class="bs-docs-separator"></hr>
+
+
+ <h2>{{_i}}Form control states{{/i}}</h2>
+ <p>{{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}</p>
+
+ <h3>{{_i}}Input focus{{/i}}</h3>
+ <p>{{_i}}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>.{{/i}}</p>
+ <form class="bs-docs-example form-inline">
+ <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+ </form>
+<pre class="prettyprint linenums">
+<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+</pre>
+
+ <h3>{{_i}}Disabled inputs{{/i}}</h3>
+ <p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
+ <form class="bs-docs-example form-inline">
+ <input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
+ </form>
+<pre class="prettyprint linenums">
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
+</pre>
+
+ <h3>{{_i}}Validation states{{/i}}</h3>
+ <p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
+
+ <form class="bs-docs-example form-horizontal">
+ <div class="control-group warning">
+ <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputWarning">
+ <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
</div>
- <div class="control-group">
- <label class="control-label">{{_i}}Radio buttons{{/i}}</label>
- <div class="controls">
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
- {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
- </label>
- <label class="radio">
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
- {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
- </label>
- </div>
+ </div>
+ <div class="control-group error">
+ <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputError">
+ <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</div>
- <div class="form-actions">
- <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
- <button class="btn">{{_i}}Cancel{{/i}}</button>
+ </div>
+ <div class="control-group success">
+ <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputSuccess">
+ <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
</div>
- </fieldset>
+ </div>
</form>
+<pre class="prettyprint linenums">
+<div class="control-group warning">
+ <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputWarning">
+ <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
+ </div>
+</div>
+<div class="control-group error">
+ <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputError">
+ <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
+ </div>
+</div>
+<div class="control-group success">
+ <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
+ <div class="controls">
+ <input type="text" id="inputSuccess">
+ <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+ </div>
+</div>
+</pre>
+
</section>
projects / thirdparty / bootstrap.git / commitdiff
