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

Merge pull request #18654 from patrickhlauke/docs-helptext1

Browse Source 
Docs: reintroduce `aria-describedby` advice for help text
This commit is contained in:
Patrick H. Lauke 2015-12-24 13:38:46 +00:00
commit e2bf1e9fae
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/forms.md
View File

@ -21,8 +21,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
<form>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
@ -54,8 +54,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</fieldset>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
<small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset>
<div class="radio">
<label>
@ -517,19 +517,33 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
{% callout warning %}
#### Associating help text with form controls
Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
{% endcallout %}
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
{% example html %}
<small class="text-muted">
Some inline text with a small tag looks like this.
</small>
<form class="form-inline">
<div class="form-group">
<label for="inputPassword4">Password</label>
<input type="password" id="inputPassword4" class="form-control" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
{% endexample %}
Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
{% example html %}
<p class="text-muted">
A block of help text that breaks onto a new line and may extend beyond one line.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<p id="passwordHelpBlock" class="text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
</p>
{% endexample %}