diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/css/forms.html | 52 | ||||
| -rw-r--r-- | docs/_includes/nav/css.html | 2 |
2 files changed, 29 insertions, 25 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index f0d59018b..fab5ea102 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -609,6 +609,30 @@ {% endhighlight %} + <h2 id="forms-help-text">Help text</h2> + <p>Block level help text for form controls.</p> + <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility"> + <h4>Associating help text with form controls</h4> + <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p> + </div> + <div class="bs-example" data-example-id="simple-help-text"> + <form> + <div class="form-group"> + <label for="inputHelpBlock">Input with help text</label> + <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> + </div> + <span id="helpBlock" 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 %} +<label class="sr-only" for="inputHelpBlock">Input with help text</label> +<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> +... +<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> +{% endhighlight %} +</div> + + <h2 id="forms-control-validation">Validation states</h2> <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> @@ -622,7 +646,8 @@ <form> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> - <input type="text" class="form-control" id="inputSuccess1"> + <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> + <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> @@ -661,7 +686,8 @@ {% highlight html %} <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> - <input type="text" class="form-control" id="inputSuccess1"> + <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> + <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> @@ -1001,25 +1027,3 @@ </div> {% endhighlight %} - <h2 id="forms-help-text">Help text</h2> - <p>Block level help text for form controls.</p> - <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility"> - <h4>Associating help text with form controls</h4> - <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p> - </div> - <div class="bs-example" data-example-id="simple-help-text"> - <form> - <div class="form-group"> - <label for="inputHelpBlock">Input with help text</label> - <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> - </div> - <span id="helpBlock" 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 %} -<label class="sr-only" for="inputHelpBlock">Input with help text</label> -<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> -... -<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> -{% endhighlight %} -</div> diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index 02becfe68..59134bdfc 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -73,9 +73,9 @@ <li><a href="#forms-control-focus">Focus state</a></li> <li><a href="#forms-control-disabled">Disabled state</a></li> <li><a href="#forms-control-readonly">Readonly state</a></li> + <li><a href="#forms-help-text">Help text</a></li> <li><a href="#forms-control-validation">Validation states</a></li> <li><a href="#forms-control-sizes">Control sizing</a></li> - <li><a href="#forms-help-text">Help text</a></li> </ul> </li> <li> |