rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity

Always wrap form examples in .bs-example; add some missing role='form'

Browse Source
This commit is contained in:
Mark Otto 2013-08-21 15:12:55 -07:00
parent 6fc988613a
commit bc2e97756f
1 changed files with 233 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

434
css.html
View File

@ -1446,27 +1446,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2> <h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p> <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<form class="bs-example" role="form"> <div class="bs-example">
<div class="form-group"> <form role="form">
<label for="exampleInputEmail1">Email address</label> <div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> <label for="exampleInputEmail1">Email address</label>
</div> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<div class="form-group"> </div>
<label for="exampleInputPassword1">Password</label> <div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <label for="exampleInputPassword1">Password</label>
</div> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="form-group"> </div>
<label for="exampleInputFile">File input</label> <div class="form-group">
<input type="file" id="exampleInputFile"> <label for="exampleInputFile">File input</label>
<p class="help-block">Example block-level help text here.</p> <input type="file" id="exampleInputFile">
</div> <p class="help-block">Example block-level help text here.</p>
<div class="checkbox"> </div>
<label> <div class="checkbox">
<input type="checkbox"> Check me out <label>
</label> <input type="checkbox"> Check me out
</div> </label>
<button type="submit" class="btn btn-default">Submit</button> </div>
</form><!-- /example --> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /example -->
{% highlight html %} {% highlight html %}
<form role="form"> <form role="form">
<div class="form-group"> <div class="form-group">
@ -1502,22 +1504,24 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Always add labels</h4> <h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div> </div>
<form class="bs-example form-inline" role="form"> <div class="bs-example">
<div class="form-group"> <form class="form-inline" role="form">
<label class="sr-only" for="exampleInputEmail2">Email address</label> <div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
<div class="form-group"> </div>
<label class="sr-only" for="exampleInputPassword2">Password</label> <div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> <label class="sr-only" for="exampleInputPassword2">Password</label>
</div> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
<div class="checkbox"> </div>
<label> <div class="checkbox">
<input type="checkbox"> Remember me <label>
</label> <input type="checkbox"> Remember me
</div> </label>
<button type="submit" class="btn btn-default">Sign in</button> </div>
</form><!-- /example --> <button type="submit" class="btn btn-default">Sign in</button>
</form>
</div><!-- /example -->
{% highlight html %} {% highlight html %}
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<div class="form-group"> <div class="form-group">
@ -1540,34 +1544,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-horizontal">Horizontal form</h2> <h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<form class="bs-example form-horizontal"> <div class="bs-example">
<div class="form-group"> <form class="form-horizontal">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label> <div class="form-group">
<div class="col-lg-10"> <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<input type="email" class="form-control" id="inputEmail1" placeholder="Email"> <div class="col-lg-10">
</div> <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div> </div>
</div> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
<div class="col-lg-offset-2 col-lg-10"> <div class="col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button> <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div> </div>
</div> <div class="form-group">
</form> <div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
<div class="form-group"> <div class="form-group">
@ -1609,18 +1615,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4> <h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p> <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div> </div>
<form class="bs-example"> <div class="bs-example">
<input type="text" class="form-control" placeholder="Text input"> <form role="form">
</form> <input type="text" class="form-control" placeholder="Text input">
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input type="text" class="form-control" placeholder="Text input"> <input type="text" class="form-control" placeholder="Text input">
{% endhighlight %} {% endhighlight %}
<h3>Textarea</h3> <h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-example"> <div class="bs-example">
<textarea class="form-control" rows="3"></textarea> <form role="form">
</form> <textarea class="form-control" rows="3"></textarea>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<textarea class="form-control" rows="3"></textarea> <textarea class="form-control" rows="3"></textarea>
{% endhighlight %} {% endhighlight %}
@ -1628,27 +1638,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3> <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> <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> <h4>Default (stacked)</h4>
<form class="bs-example"> <div class="bs-example">
<div class="checkbox"> <form role="form">
<label> <div class="checkbox">
<input type="checkbox" value=""> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="checkbox" value="">
</label> Option one is this and that&mdash;be sure to include why it's great
</div> </label>
<br> </div>
<div class="radio"> <br>
<label> <div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <label>
Option one is this and that&mdash;be sure to include why it's great <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
</label> Option one is this and that&mdash;be sure to include why it's great
</div> </label>
<div class="radio"> </div>
<label> <div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> <label>
Option two can be something else and selecting it will deselect option one <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
</label> Option two can be something else and selecting it will deselect option one
</div> </label>
</form> </div>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="checkbox"> <div class="checkbox">
<label> <label>
@ -1673,17 +1685,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4> <h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p> <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-example"> <div class="bs-example">
<label class="checkbox-inline"> <form role="form">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <label class="checkbox-inline">
</label> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
<label class="checkbox-inline"> </label>
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2 <label class="checkbox-inline">
</label> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
<label class="checkbox-inline"> </label>
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <label class="checkbox-inline">
</label> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</form> </label>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@ -1698,23 +1712,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3> <h3>Selects</h3>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p> <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<form class="bs-example"> <div class="bs-example">
<select class="form-control"> <form role="form">
<option>1</option> <select class="form-control">
<option>2</option> <option>1</option>
<option>3</option> <option>2</option>
<option>4</option> <option>3</option>
<option>5</option> <option>4</option>
</select> <option>5</option>
<br> </select>
<select multiple class="form-control"> <br>
<option>1</option> <select multiple class="form-control">
<option>2</option> <option>1</option>
<option>3</option> <option>2</option>
<option>4</option> <option>3</option>
<option>5</option> <option>4</option>
</select> <option>5</option>
</form> </select>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<select class="form-control"> <select class="form-control">
<option>1</option> <option>1</option>
@ -1736,20 +1752,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-controls-static">Static control</h2> <h2 id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p> <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<form class="bs-example form-horizontal"> <div class="bs-example">
<div class="form-group"> <form class="form-horizontal" role="form">
<label class="col-lg-2 control-label">Email</label> <div class="form-group">
<div class="col-lg-10"> <label class="col-lg-2 control-label">Email</label>
<p class="form-control-static">email@example.com</p> <div class="col-lg-10">
<p class="form-control-static">email@example.com</p>
</div>
</div> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="inputPassword" class="col-lg-2 control-label">Password</label>
<label for="inputPassword" class="col-lg-2 control-label">Password</label> <div class="col-lg-10">
<div class="col-lg-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password">
<input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div>
</div> </div>
</div> </form>
</form> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
<div class="form-group"> <div class="form-group">
@ -1773,18 +1791,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3> <h3 id="forms-input-focus">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> <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-example"> <div class="bs-example">
<input class="form-control" id="focusedInput" type="text" value="This is focused..."> <form role="form">
</form> <input class="form-control" id="focusedInput" type="text" value="This is focused...">
</div>
</div>
{% highlight html %} {% highlight html %}
<input class="form-control" id="focusedInput" type="text" value="This is focused..."> <input class="form-control" id="focusedInput" type="text" value="This is focused...">
{% endhighlight %} {% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-example"> <div class="bs-example">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <form role="form">
</form> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %} {% endhighlight %}
@ -1802,26 +1824,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p> <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div> </div>
<form class="bs-example"> <div class="bs-example">
<fieldset disabled> <form role="form">
<div class="form-group"> <fieldset disabled>
<label for="disabledTextInput">Disabled input</label> <div class="form-group">
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <label for="disabledTextInput">Disabled input</label>
</div> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
<div class="form-group"> </div>
<label for="disabledSelect">Disabled select menu</label> <div class="form-group">
<select id="disabledSelect" class="form-control"> <label for="disabledSelect">Disabled select menu</label>
<option>Disabled select</option> <select id="disabledSelect" class="form-control">
</select> <option>Disabled select</option>
</div> </select>
<div class="checkbox"> </div>
<label> <div class="checkbox">
<input type="checkbox"> Can't check this <label>
</label> <input type="checkbox"> Can't check this
</div> </label>
<button type="submit" class="btn btn-primary">Submit</button> </div>
</fieldset> <button type="submit" class="btn btn-primary">Submit</button>
</form> </fieldset>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<form class="form-inline" role="form"> <form class="form-inline" role="form">
<fieldset disabled> <fieldset disabled>
@ -1848,20 +1872,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-validation">Validation states</h3> <h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p> <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
<form class="bs-example"> <div class="bs-example">
<div class="form-group has-success"> <form role="form">
<label class="control-label" for="inputSuccess">Input with success</label> <div class="form-group has-success">
<input type="text" class="form-control" id="inputSuccess"> <label class="control-label" for="inputSuccess">Input with success</label>
</div> <input type="text" class="form-control" id="inputSuccess">
<div class="form-group has-warning"> </div>
<label class="control-label" for="inputWarning">Input with warning</label> <div class="form-group has-warning">
<input type="text" class="form-control" id="inputWarning"> <label class="control-label" for="inputWarning">Input with warning</label>
</div> <input type="text" class="form-control" id="inputWarning">
<div class="form-group has-error"> </div>
<label class="control-label" for="inputError">Input with error</label> <div class="form-group has-error">
<input type="text" class="form-control" id="inputError"> <label class="control-label" for="inputError">Input with error</label>
</div> <input type="text" class="form-control" id="inputError">
</form> </div>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="form-group has-success"> <div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label> <label class="control-label" for="inputSuccess">Input with success</label>
@ -1883,23 +1909,25 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Height sizing</h3> <h3>Height sizing</h3>
<p>Create larger or smaller form controls that match button sizes.</p> <p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing"> <div class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes"> <form role="form">
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <div class="controls">
<input type="text" class="form-control" placeholder="Default input"> <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control input-sm" type="text" placeholder=".input-sm"> <input type="text" class="form-control" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg"> <select class="form-control input-lg">
<option value="">.input-lg</option> <option value="">.input-lg</option>
</select> </select>
<select class="form-control"> <select class="form-control">
<option value="">Default select</option> <option value="">Default select</option>
</select> </select>
<select class="form-control input-sm"> <select class="form-control input-sm">
<option value="">.input-sm</option> <option value="">.input-sm</option>
</select> </select>
</div> </div>
</form> </form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input"> <input class="form-control" type="text" placeholder="Default input">
@ -1912,19 +1940,21 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Column sizing</h3> <h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-example" style="padding-bottom: 15px;"> <div class="bs-example">
<div class="row"> <form role="form">
<div class="col-lg-2"> <div class="row">
<input type="text" class="form-control" placeholder=".col-lg-2"> <div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div> </div>
<div class="col-lg-3"> </form>
<input type="text" class="form-control" placeholder=".col-lg-3"> </div><!-- /.bs-example -->
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
</form>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-2"> <div class="col-lg-2">
@ -1941,10 +1971,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-help-text">Help text</h2> <h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p> <p>Block level help text for form controls.</p>
<form class="bs-example"> <div class="bs-example">
<input type="text" class="form-control"> <form role="form">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> <input type="text" class="form-control">
</form> <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
</div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %} {% endhighlight %}