0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-13 01:08:58 +01:00
Bootstrap/site/content/docs/4.3/forms/overview.md
2019-07-17 15:27:01 +03:00

5.6 KiB

layout title description group toc aliases sections
docs Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. forms true /docs/4.3/forms/
title description
Form control Style textual inputs and textareas with support for multiple states.
title description
Select Improve browser default select elements with a custom initial appearance.
title description
Checks Use our custom radio buttons and checkboxes in forms for selecting input options.
title description
File Replace browser default file inputs with our custom version with optional JavaScript.
title description
Range Replace browser default range inputs with our custom version.
title description
Input group Attach labels and buttons to your inputs for increased semantic value.
title description
Layout Create inline, horizontal, or complex grid-based layouts with your forms.
title description
Validation Validate your forms with custom or native validation behaviors and styles.

Overview

Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/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.

{{< example >}}

We'll never share your email with anyone else.
Submit {{< /example >}}

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

{{< callout warning >}}

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. {{< /callout >}}

Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin 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 <small>, <span>, or something else) with nothing more than a utility class.

{{< example >}}

Must be 8-20 characters long.
{{< /example >}}

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

{{< highlight html >}} {{< /highlight >}}

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

By default, browsers will treat all native form controls (<input>, <select>, and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none.

{{< example >}}

Disabled select
Submit {{< /example >}}