Bootstrap 简明教程

Bootstrap - Forms

本章将讨论 Bootstrap 表单。表单便于用户输入数据，例如姓名、电子邮件地址、密码等，然后可以将其发送到服务器进行处理。Bootstrap 提供了各种类来创建各种具有不同样式、布局和自定义组件的表单。

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).

以下示例演示了 Bootstrap 的基本表单。

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.