表单概览

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

本页目录

表单控件 为文本输入框和文本区域设置样式，并支持多种状态。

选择通过自定义初始外观改进浏览器默认的选择元素。

支票与无线电 在表单中使用我们的自定义单选按钮和复选框来选择输入选项。

范围用我们的自定义版本替换浏览器默认的范围输入。

输入组 为你的输入添加标签和按钮以提高语义价值。

浮动标签 创建美观简洁的表单标签，悬浮在输入字段上方。

布局使用你的表单创建内联、水平或复杂的网格布局。

验证使用自定义或原生的验证行为和样式来验证你的表单。

概览

Bootstrap 的表单控件通过类扩展了我们的重置表单样式。使用这些类可以选择使用它们的自定义显示，从而在各个浏览器和设备上获得更一致的渲染效果。

请确保在所有输入中使用适当的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 布尔属性以防止用户交互，并使其看起来更浅。

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

为 <fieldset> 添加 disabled 属性即可禁用其中的所有控件。浏览器处理所有本地表单控件（<input>, <select>，和 <button> 元素) 内部的 <fieldset disabled> 禁用了，防止键盘和鼠标的交互。

但是，如果你的表单还包括类似按钮的自定义元素，例如 <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>

无障碍访问

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

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

<label> 使用…隐藏的元素 .visually-hidden 类
指向可以用作标签的现有元素 aria-labelledby
提供一个 title 属性
使用显式方式在元素上设置可访问名称 aria-label

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

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

CSS

许多表单变量在通用级别上设置，以便被各个表单组件重复使用和扩展。你最常见到这些是 $input-btn-* 和 $input-* 变量。

Sass 变量

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

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