表单

用于创建各种窗体的窗体控件样式、布局选项和自定义组件的示例和使用指南。

当前页

表单控件 设置input和textarea的样式，支持多种状态。

下拉列表（Select） 改进了具有自定义初始外观的浏览器默认select元素。

复选和单选（Checks & radios） 在表单中使用我们的自定义单选按钮和复选框来选择输入选项。

范围（Range） 将浏览器默认范围输入替换为我们的自定义版本。

输入组（Input group） 将标签和按钮附加到输入以提高语义价值。

浮动标签（Floating labels） 创建浮动在输入字段上的精美简单的表单标签。

布局（Layout） 使用表单创建基于网格的内联、水平或复杂的布局。

验证器（Validation） 使用自定义或本机验证行为和样式验证表单。

概述

Bootstrap 的表单控件扩展了我们的 Rebooted 表单样式类。使用这些类选择加入其自定义显示，以便在浏览器和设备之间实现更一致的呈现。

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

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

html

<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布尔属性，以防止用户交互并使其看起来更轻。

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

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

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

html

<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>的内容。

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

使用 .visually-hidden 类隐藏的 <label> 元素
指向可以使用aria-labelledby充当标签的现有元素
提供title属性
使用aria-label在元素上显式设置辅助名称

如果这些都不存在，辅助技术可能会使用 placeholder属性作为<input>和<textarea>元素上辅助名称的回调。本节中的示例提供了一些建议的特定于案例的方法。

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

CSS

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

Sass 变量

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

scss/_variables.scss

$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);