Bootstrap - Forms

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.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <div class="mb-3">
        <label for=" sampleInputEmail" class="form-label">Username</label>
        <input type="email" class="form-control" id=" sampleInputEmail" aria-describedby="emailHelp">
      </div>
      <div class="mb-3">
        <label for="sampleInputPassword" class="form-label">Password</label>
        <input type="password" class="form-control" id="sampleInputPassword">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="sampleCheck">
        <label class="form-check-label" for="sampleCheck">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary">Log in</button>
    </form>
  </body>
  </html>

Disabled forms

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

  • To disable all the controls in a <fieldset>, add the disabled attribute. The <input>, <select>, and <button> elements of native form controls contained within a fieldset <disabled> are all treated by browsers as disabled, preventing keyboard and mouse interactions with them.

  • If form has custom button-like elements, such as <a class="btn btn-*">...</a>, they have pointer-events: none set, which means they are still focusable and keyboard-operable. To prevent them from receiving focus use tabindex="-1" and use aria-disabled="disabled" to signal their state to assistive technologies.

Example

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <fieldset disabled>
        <div class="mb-3">
          <label for="disabledEmailInput" class="form-label">Disabled Input</label>
          <input type="text" id="disabledEmailInput" class="form-control" placeholder="Email Id">
        </div>
        <div class="mb-3">
          <label for="disabledPasswordInput" class="form-label">Disabled Input</label>
          <select id="disabledPasswordInput" class="form-select">
            <option>Password</option>
          </select>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledcheckbox" disabled>
            <label class="form-check-label" for="disabledcheckbox">
              Disabled Check Box
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Disabled Button</button>
      </fieldset>
    </form>
  </body>
  </html>

Accessibility

  • Every form control has an appropriate accessible name for assistive technology users. Using label elements or descriptive text within <button>...</button> 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 <label> elements.

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

    • 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 <input> and <textarea> elements.

  • Using visually hidden content will help assistive technology users, however certain users may still have issues with a lack of visible label text.

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements