View on GitHub

Forms

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

在本页

表单控件 样式文本输入和文本区域支持多种状态。

选择使用自定义初始外观改进浏览器默认选择元素。

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

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

输入组 将标签和按钮附加到您的输入以增加语义价值。

浮动标签 创建漂浮在您的输入字段上的精美简单的表单标签。

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

验证使用自定义或本机验证行为和样式验证您的表单。

概述

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>

表单文本

可以使用.form-text创建块级或行内级表单文本。

将表单文本与表单控件相关联

表单文本应该与使用该aria-describedby属性的表单控件显式关联。这将确保辅助技术（例如屏幕阅读器）会在用户聚焦或输入控件时宣布此表单文本。

输入下方的表单文本可以使用.form-text. 如果将使用块级元素，则添加顶部边距以便于与上面的输入间隔开。

Password

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

HTML

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

内联文本可以使用任何典型的内联 HTML 元素（可以是<span>、<small>或其他元素），仅需使用.form-text类。

Password

Must be 8-20 characters long.

HTML

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

禁用表单

在输入上添加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>

辅助功能

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

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

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

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

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

Sass

许多表单变量在通用级别设置，以供各个表单组件重用和扩展。您会最常看到这些作为$input-btn-*和$input-*变量。

变量

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

$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:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

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