From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.3/forms/form-control.md | 190 ++++++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 site/content/docs/5.3/forms/form-control.md (limited to 'site/content/docs/5.3/forms/form-control.md') diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md new file mode 100644 index 0000000..0c6b599 --- /dev/null +++ b/site/content/docs/5.3/forms/form-control.md @@ -0,0 +1,190 @@ +--- +layout: docs +title: Form controls +description: Give textual form controls like ``s and ` + +{{< /example >}} + +## Sizing + +Set heights using classes like `.form-control-lg` and `.form-control-sm`. + +{{< example >}} + + + +{{< /example >}} + +## Form text + +Block-level or inline-level form text can be created using `.form-text`. + +{{< callout warning >}} +Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. +{{< /callout >}} + +Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. + +{{< example >}} + + +
+ Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +
+{{< /example >}} + +Inline text can use any typical inline HTML element (be it a ``, ``, or something else) with nothing more than the `.form-text` class. + +{{< example >}} +
+
+ +
+
+ +
+
+ + Must be 8-20 characters long. + +
+
+{{< /example >}} + +## Disabled + +Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. + +{{< example >}} + + +{{< /example >}} + +## Readonly + +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. `readonly` inputs can still be focused and selected, while `disabled` inputs cannot. + +{{< example >}} + +{{< /example >}} + +## Readonly plain text + +If you want to have `` elements in your form styled as plain text, replace `.form-control` with `.form-control-plaintext` to remove the default form field styling and preserve the correct `margin` and `padding`. + +{{< example >}} +
+ +
+ +
+
+
+ +
+ +
+
+{{< /example >}} + +{{< example >}} +
+
+ + +
+
+ + +
+
+ +
+
+{{< /example >}} + +## File input + +{{< example >}} +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+{{< /example >}} + +## Color + +Set the `type="color"` and add `.form-control-color` to the ``. We use the modifier class to set fixed `height`s and override some inconsistencies between browsers. + +{{< example >}} + + +{{< /example >}} + +## Datalists + +Datalists allow you to create a group of `