表单

概述

¥Overview

Bootstrap 的表单控件通过类扩展了 我们的重新启动表单样式。使用这些类选择其自定义显示，以便在浏览器和设备之间实现更一致的渲染。

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

请务必在所有输入上使用适当的 type 属性（例如，对于电子邮件地址使用 email，对于数字信息使用 number），以利用更新的输入控件，例如电子邮件验证、数字选择等。

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

这是一个演示 Bootstrap 表单样式的简单示例。继续阅读有关所需类、表单布局等的文档。

¥Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

禁用表格

¥Disabled forms

在输入上添加 disabled 布尔属性以防止用户交互并使其显得更轻。

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

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

将 disabled 属性添加到 <fieldset> 以禁用其中的所有控件。浏览器将 <fieldset disabled> 内的所有原生表单控件（<input>、<select> 和 <button> 元素）视为已禁用，从而阻止键盘和鼠标在其上进行交互。

¥Add the disabled attribute to a <fieldset> to disable all the controls within. Browsers treat all native form controls (<input>, <select>, and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.

但是，如果你的表单还包含自定义类似按钮的元素（例如 <a class="btn btn-*">...</a>），则这些元素只会被赋予 pointer-events: none 样式，这意味着它们仍然可以使用键盘进行聚焦和操作。在这种情况下，你必须手动修改这些控件，添加 tabindex="-1" 以防止它们接收焦点，并添加 aria-disabled="disabled" 以向辅助技术发送其状态信号。

¥However, if your form also includes custom button-like elements such as <a class="btn btn-*">...</a>, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

无障碍

¥Accessibility

确保所有表单控件都有适当的可访问名称，以便可以将其用途传达给辅助技术的用户。实现此目的的最简单方法是使用 <label> 元素，或者在按钮的情况下包含足够的描述性文本作为 <button>...</button> 内容的一部分。

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

对于无法包含可见 <label> 或适当文本内容的情况，还有其他方法仍然提供可访问的名称，例如：

¥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:

• 使用 .visually-hidden 类隐藏 <label> 元素

  ¥<label> elements hidden using the .visually-hidden class

• 使用 aria-labelledby 指向可以充当标签的现有元素

  ¥Pointing to an existing element that can act as a label using aria-labelledby

• 提供 title 属性

  ¥Providing a title attribute

• 使用 aria-label 在元素上显式设置可访问名称

  ¥Explicitly setting the accessible name on an element using aria-label

如果这些都不存在，辅助技术可能会使用 placeholder 属性作为 <input> 和 <textarea> 元素上可访问名称的后备。本节中的示例提供了一些建议的、针对具体情况的方法。

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

虽然使用视觉上隐藏的内容（.visually-hidden、aria-label，甚至 placeholder 内容，一旦表单字段有内容就会消失）将有利于辅助技术用户，但缺乏可见标签文本对于某些用户来说仍然可能是个问题。就可访问性和可用性而言，某种形式的可见标签通常是最好的方法。

¥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

许多表单变量是在一般级别设置的，以便由各个表单组件重用和扩展。你最常看到的是 $input-btn-* 和 $input-* 变量。

¥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 变量

¥Sass variables

$input-btn-* 变量是我们的按钮 和表单组件之间共享的全局变量。你会发现这些经常被重新分配为其他特定于组件的变量的值。

¥$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.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color:         $focus-ring-color;
$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      var(--#{$prefix}border-width);