Reprence Html CSS javascript PHP MySQL Bootsrap

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Bootstrap’s form controls expand on our Rebooted form styles 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.

ov1

Disabled forms

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

Add the disabled attribute to a

to disable all the controls within. Browsers treat all native form controls (,

Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a < label> element, or—in the case of buttons—to include sufficiently descriptive text as part of the < button>...< /button> content.

For situations where it’s not possible to include a visible < label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

ov3

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on < input> and < textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

CSS

Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $input-btn-* and $input-* variables.

Sass variables

$input-btn-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.