diff --git a/docs/components/forms.md b/docs/components/forms.md index ef56a9e890..3b1286096f 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a ` {% example html %}
-
+
We'll never share your email with anyone else. -
-
+ +
-
-
+ +
-
-
+ +
-
-
+ +
-
-
+ +
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. +
+
+ Radio buttons +
+ +
+
+ +
+
+ +
-
- -
-
- -
-
- -
+
-
+
{% endexample %} @@ -330,11 +333,16 @@ Because of this, you may need to manually address the width and alignment of ind {% endexample %} +{% callout warning %} + #### Alternatives to hidden labels + Assistive technologies such as 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 `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised. + {% endcallout %} + ### Using the Grid For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. -Be sure to add `.form-control-label` to your `