mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 21:09:06 +02:00
overhaul forms docs to simplify presentation of everything, reduce text, and increase visibility of examples
This commit is contained in:
Mark Otto
@@ -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><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
|
||||
@@ -761,7 +724,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<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
|
||||
@@ -770,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</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">
|
||||
@@ -794,7 +764,7 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
<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">
|
||||
@@ -804,331 +774,424 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
</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>
|
||||
<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="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="">Password</label>
|
||||
<div class="controls">
|
||||
<input type="password" placeholder="Password">
|
||||
</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">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</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>
|
||||
</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="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn">Cancel</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>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="">Password</label>
|
||||
<div class="controls">
|
||||
<input type="password" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</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>
|
||||
</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="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||
<button class="btn">Cancel</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user