From b21b83b7ead54e6ed0ab130ba77cbcf4a42c6e24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Apr 2017 14:51:27 -0700 Subject: fixes #22244 by providing more specific guidance on input types --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index 44cb1ed0d..53654fac2 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -16,7 +16,7 @@ Bootstrap provides several form control styles, layout options, and custom compo Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. -Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**. +Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information). {% example html %}
-- cgit v1.2.3 From e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 20:15:30 -0700 Subject: document more form layout options with grid, including some compact .gutters-sm examples --- docs/components/forms.md | 115 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index fd87dec7a..51d9e8f90 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -271,6 +271,121 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o {% endexample %} +### Grid + +{% example html %} +
+
+
+ +
+
+ +
+
+
+{% endexample html %} + +{% example html %} +
+
+
+ +
+
+ +
+
+ +
+
+
+{% endexample html %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. -- cgit v1.2.3 From 9e6644a20685d1276e569020cb930c635df9acd7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 21:54:25 -0700 Subject: Update forms docs to add more headings and move the huge type example into a table --- docs/components/forms.md | 103 ++++++++++------------------------------------- 1 file changed, 21 insertions(+), 82 deletions(-) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index 51d9e8f90..d71615976 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -18,6 +18,8 @@ Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl } Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information). +### Example + {% example html %}
@@ -89,6 +91,8 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for {% endexample %} +### Supported controls + Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. @@ -167,88 +171,23 @@ Below is a complete list of the specific form controls supported by Bootstrap an ### Textual inputs -Here are examples of `.form-control` applied to each textual HTML5 `` `type`. - -{% example html %} -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-{% endexample %} +Here are examples of `.form-control` applied to each textual HTML5 `` `type` (meaning, almost everything except the file, checkbox, and radio inputs). + +| Type | Example | +| --- | --- | +| `text` | | +| `search` | | +| `email` | | +| `url` | | +| `tel` | | +| `password` | | +| `number` | | +| `datetime-local` | | +| `date` | | +| `month` | | +| `week` | | +| `time` | | +| `color` | | ## Form layouts -- cgit v1.2.3 From f3acf9d890568e7ecaab0c4218f51f4afb7489d7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 21:54:35 -0700 Subject: custom forms example with new grid styles --- docs/components/forms.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index d71615976..feadf19bc 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -325,6 +325,32 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o {% endexample %} +{% example html %} +
+
+
+ + +
+
+ +
+
+ +
+
+ +{% endexample %} + ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. -- cgit v1.2.3 From 8a6642bbff3b86a24fc47cad42f5a23af80f057a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 14:38:37 -0700 Subject: rename section --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/components/forms.md b/docs/components/forms.md index feadf19bc..32b937172 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -189,7 +189,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `` `ty | `time` | | | `color` | | -## Form layouts +## Layout Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. -- cgit v1.2.3 From 4a554e5ff5fd8a2e82cfbea3f301049c0de48d2a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 1 Jun 2017 08:06:17 -0700 Subject: trying out new validation styles --- docs/4.0/components/forms.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) (limited to 'docs') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 8fe2a9d26..6c3272dc1 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms. {% endexample %} +### Validate with grid + +And in more complex grids. + +{% example html %} +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + Example help text that remains unchanged. +
+ +
+{% endexample %} + Checkboxes and radios are also supported. {% example html %} -- cgit v1.2.3 From af097bd5bf18a12e6bfb4f8ee59459517062a379 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Jun 2017 20:21:08 -0700 Subject: start rewriting --- docs/4.0/components/forms.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6c3272dc1..3fc7bfddc 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -809,11 +809,19 @@ Inline text can use any typical inline HTML element (be it a ``, `` ## Validation -Bootstrap includes validation styles for danger, warning, and success states on most form controls. +Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. + +**We highly recommend using custom validation messages as native browser validation is not announced to most assistive technologies like screenreaders.** ### How it works -Here's a rundown of how they work: +Here's a rundown of how form validation works: + +- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, for use on ``s. +- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. +- You may choose to rely on the browser default validation feedback, or implement custom feedback styles with HTML and CSS. +- You may provide custom validity messages with `setCustomValidity` in JavaScript. + - 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. -- cgit v1.2.3 From d2c9f3f00a385a6509589a3b102d1f8ecda84631 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Jun 2017 23:00:14 -0700 Subject: flesh out invalid styles on .was-validated --- docs/4.0/components/forms.md | 135 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 133 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 3fc7bfddc..b66921955 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -817,11 +817,142 @@ Provide valuable, actionable feedback to your users with HTML5 form validation Here's a rundown of how form validation works: -- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, for use on ``s. +- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, on ``, ` + + + +{% endexample %} + +For file inputs, swap the `.form-control` for `.form-control-file`. + +{% example html %} +
- - - 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 %} + +### Sizing + +Set heights using classes like `.form-control-lg` and `.form-control-sm`. + +{% example html %} + + + +{% endexample %} + +{% example html %} + + + +{% endexample %} + +### Readonly + +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. + +{% example html %} + +{% endexample %} + +### Static + +If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding. + +{% example html %} +
+
+ +
+
-
- +
+
+ +
+
-
-
-
- {% endexample %} -### Supported controls - -Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassesUsed forSupported variations
- {% markdown %}`.form-group`{% endmarkdown %} - - Any group of form controls - - {% markdown %}Use with any block-level element like `
` or `
`{% endmarkdown %} -
- {% markdown %}`.form-control`{% endmarkdown %} - - Textual inputs - - {% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %} -
- Select menus - - {% markdown %}`multiple`, `size`{% endmarkdown %} -
- Textareas - - N/A -
- {% markdown %}`.form-control-file`{% endmarkdown %} - - File inputs - - {% markdown %}`file`{% endmarkdown %} -
-{% markdown %} -`.form-check` -{% endmarkdown %} - - Checkboxes and radios - - N/A -
- -Here are examples of `.form-control` applied to each textual HTML5 `` `type` (meaning, almost everything except the file, checkbox, and radio inputs). - -| Type | Example | -| --- | --- | -| `text` | | -| `search` | | -| `email` | | -| `url` | | -| `tel` | | -| `password` | | -| `number` | | -| `datetime-local` | | -| `date` | | -| `month` | | -| `week` | | -| `time` | | -| `color` | | +{% example html %} +
+
+ + +
+
+ + +
+ +
+{% endexample %} + +## Checkboxes and radios + +Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. + +Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `