aboutsummaryrefslogtreecommitdiff
path: root/docs/components/forms.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-10-28 16:36:09 -0700
committerMark Otto <[email protected]>2016-10-28 16:36:09 -0700
commita6cd4937af4c095714095ca2b0ac457a6d5ebb92 (patch)
tree778826c0f5a8b30a919e9d530a75f3736f46f22b /docs/components/forms.md
parentcfd6e92ff614a13729e04629a914d6bce9f94ae6 (diff)
downloadbootstrap-a6cd4937af4c095714095ca2b0ac457a6d5ebb92.tar.xz
bootstrap-a6cd4937af4c095714095ca2b0ac457a6d5ebb92.zip
rework some copy
Diffstat (limited to 'docs/components/forms.md')
-rw-r--r--docs/components/forms.md14
1 files changed, 11 insertions, 3 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 040f4f7e5..cf5a8473e 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -682,7 +682,11 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
## Validation
-Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work:
+Bootstrap includes validation styles for danger, warning, and success states on most form controls.
+
+### How it works
+
+Here's a rundown of how they work:
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-label`, `.form-control`, or custom form element will receive the validation styles.
- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
@@ -690,14 +694,14 @@ Bootstrap includes validation styles for danger, warning, and success states on
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
+### Defining states
+
Generally speaking, you'll want to use a particular state for specific types of feedback:
- **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form.
- **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
- And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
-Here are some examples of the aforementioned classes in action.
-
{% comment %}
{% callout warning %}
#### Conveying validation state to assistive technologies and colorblind users
@@ -708,6 +712,10 @@ Ensure that an alternative indication of state is also provided. For instance, y
{% endcallout %}
{% endcomment %}
+### Examples
+
+Here are some examples of the aforementioned classes in action. First up is your standard left-aligned fields with labels, help text, and validation messaging.
+
{% example html %}
<div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label>