Bootstrap - Forms

Previous
Quiz
Next

This chapter will discuss about Bootstrap forms. A form facilitate user to enter data such as name, email address, password etc, which can then be sent to server for processing. Bootstrap provides classes to create a variety of forms with varied styles, layouts and custom components.

Basic form

  • Form controls in Bootstrap extend Rebooted form styles with classes. For consistent rendering across browsers and devices with customized display, use these classes .

  • To use more recent input controls, such as email verification, number selection, and other features, be sure to use an appropriate type attribute on all inputs (e.g., email for email addresses or the number for numerical data).

Following example demonstrates Boostrap's basic form.

Example

You can edit and try running this code using Edit & Run option.

  
  
  
    Bootstrap - Form

Disabled forms

  • To prevent user interactions and make an input appear lighter, use the disabled boolean attribute.

  • To disable all the controls in a

    , add the disabled attribute. The ,

Accessibility

  • Every form control has an appropriate accessible name for assistive technology users. Using label elements or descriptive text within is the simplest method to achieve this.

  • When a visible "label" or appropriate text content is not provided then use other approaches for accessible names, for example:

    • Use the class .visually-hidden to hide the elements.

    • Use aria-labelledby to pointing an existing element that behaves as a .

    • Including a title attribute.

    • Use aria-label to set the element accessible name.

  • When none of these are available, for accessible name assistive technology use placeholder attribute as a fallback on and