From 1ded0d6a4eefb7daca62c44e4e735aec200f0b6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Feb 2019 11:15:34 -0800 Subject: Release v4.3.0 (#28228) * Prep for v4.3.0 * More updates for v4.3.0. * rerun to build docs source map --- site/docs/4.3/components/forms.md | 1376 +++++++++++++++++++++++++++++++++++++ 1 file changed, 1376 insertions(+) create mode 100644 site/docs/4.3/components/forms.md (limited to 'site/docs/4.3/components/forms.md') diff --git a/site/docs/4.3/components/forms.md b/site/docs/4.3/components/forms.md new file mode 100644 index 000000000..e655e2158 --- /dev/null +++ b/site/docs/4.3/components/forms.md @@ -0,0 +1,1376 @@ +--- +layout: docs +title: Forms +description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. +group: components +toc: true +--- + +## Overview + +Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. + +Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more. + +Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. + +{% capture example %} +
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
+{% endcapture %} +{% include example.html content=example %} + +## Form controls + +Textual form controls—like ``s, ` + + +{% endcapture %} +{% include example.html content=example %} + +For file inputs, swap the `.form-control` for `.form-control-file`. + +{% capture example %} +
+
+ + +
+
+{% endcapture %} +{% include example.html content=example %} + +### Sizing + +Set heights using classes like `.form-control-lg` and `.form-control-sm`. + +{% capture example %} + + + +{% endcapture %} +{% include example.html content=example %} + +{% capture example %} + + + +{% endcapture %} +{% include example.html content=example %} + +### 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. + +{% capture example %} + +{% endcapture %} +{% include example.html content=example %} + +### Readonly plain text + +If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. + +{% capture example %} +
+
+ +
+ +
+
+
+ +
+ +
+
+
+{% endcapture %} +{% include example.html content=example %} + +{% capture example %} +
+
+ + +
+
+ + +
+ +
+{% endcapture %} +{% include example.html content=example %} + +## Range Inputs + +Set horizontally scrollable range inputs using `.form-control-range`. + +{% capture example %} +
+
+ + +
+
+{% endcapture %} +{% include example.html content=example %} + +## 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. The `disabled` attribute will apply a lighter color to help indicate the input's state. + +Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our ``s and `