跳至主要内容 跳至文档导航

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

在此页面上

概述

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>

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> 或适当文本内容的情况,还有其他方法可以提供可访问名称,例如

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

如果都不存在,辅助技术可能会诉诸使用 placeholder 属性作为 <input><textarea> 元素上可访问名称的备用方案。本部分中的示例提供了一些建议的、针对特定情况的方法。

虽然使用视觉隐藏内容(.visually-hiddenaria-label,甚至 placeholder 内容,一旦表单字段有内容就会消失)会使辅助技术用户受益,但缺乏可见的标签文本对于某些用户来说仍然可能存在问题。某种形式的可见标签通常是最佳方法,既适用于无障碍性,也适用于可用性。

CSS

许多表单变量在一般级别设置,以便由各个表单组件重新使用和扩展。您会最常看到这些变量作为 $input-btn-*$input-* 变量。

Sass 变量

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