From ea407666ce3c5d708b4a830fb2d00bdcb0d2d53e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 11 Nov 2014 20:23:49 -0800 Subject: give all docs callouts IDs [skip sauce] --- docs/_includes/css/forms.html | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'docs/_includes/css/forms.html') diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index efd2d348c..5df36e282 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -49,7 +49,7 @@ {% endhighlight %} -
+

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

@@ -57,11 +57,11 @@

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

-
+

Requires custom widths

Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

-
+

Always add labels

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 is present, screen readers 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.

@@ -186,7 +186,7 @@

Inputs

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.

-
+

Type declaration required

Inputs will only be fully styled if their type is properly declared.

@@ -198,7 +198,7 @@ {% highlight html %} {% endhighlight %} -
+

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

@@ -473,7 +473,7 @@
-
+

Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

@@ -493,12 +493,12 @@

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

-
+

Caveat about link functionality of <a>

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

-
+

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

@@ -564,7 +564,7 @@

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

-
+

Conveying validation state to assistive technologies

Using these validation styles to denote the state of a form control only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), or associate an additional element with textual information about the validation state with the form control using aria-describedby (see the example in the following section). In the case of an error, you could also use the aria-invalid="true" attribute on the form control.

@@ -652,11 +652,11 @@

With optional icons

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Feedback icons only work with textual <input class="form-control"> elements.

-
+

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

-
+

Conveying the icon's meaning to assistive technologies

To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.

Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using .sr-only text and aria-describedby) has been included for illustrative purposes.

@@ -874,7 +874,7 @@

Help text

Block level help text for form controls.

-
+

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.

-- cgit v1.2.3