表单概览 · Bootstrap 6.0 中文文档

表单控件为文本输入框和文本区域设置样式，并支持多种状态。复选框在表单中使用我们自定义的复选框来选择输入选项。收音机在表单中使用我们自定义的单选按钮来选择输入选项。范围用我们的自定义版本替换浏览器默认的范围输入。输入组为你的输入添加标签和按钮以提高语义价值。浮动标签创建美观简洁的表单标签，悬浮在输入字段上方。布局使用你的表单创建内联、水平或复杂的网格布局。验证使用自定义或原生的验证行为和样式来验证你的表单。

概览

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-field">
    <input type="checkbox" id="exampleCheck1" class="check">
    <label for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn-solid theme-primary">Submit</button>
</form>

禁用表单

在输入框上添加 disabled 布尔属性以防止用户交互，并使其看起来更浅。

HTML

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

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

但是，如果你的表单还包括类似按钮的自定义元素，例如 <a class="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-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3 form-field">
      <input type="checkbox" id="disabledFieldsetCheck" class="check" disabled>
      <label for="disabledFieldsetCheck">
        Can’t check this
      </label>
    </div>
    <button type="submit" class="btn-solid theme-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

变量

一些表单变量在根级别设置，以便被各个表单组件重复使用和扩展，但你最常看到的是在表单控件级别设置的变量。根变量通常是 --btn-input-*，这些变量与按钮共享，还有 --input-* 变量。

scss/_root.scss

--control-checked-bg: var(--primary-base),
--control-checked-border-color: var(--control-checked-bg),
--control-active-bg: var(--primary-base),
--control-active-border-color: var(--control-active-bg),
--control-disabled-bg: var(--bg-3),
--control-disabled-opacity: .65,
// Shared motion for checkbox/radio marks; slight overshoot so the mark pops in
--control-transition-duration: .15s,
--control-transition-timing: cubic-bezier(.34, 1.56, .64, 1),

--btn-input-fg: var(--fg-body),
--btn-input-bg: var(--bg-body),

--btn-input-gap: .375rem,
--btn-input-min-height: 2.375rem,
--btn-input-padding-y: .375rem,
--btn-input-padding-x: .75rem,
--btn-input-font-size: var(--body-font-size),
--btn-input-font-weight: var(--font-weight-normal),
--btn-input-line-height: var(--body-line-height),
--btn-input-border-radius: var(--radius-5),

--btn-input-xs-gap: var(--spacer-1),
--btn-input-xs-min-height: 1.5rem,
--btn-input-xs-padding-y: .125rem,
--btn-input-xs-padding-x: .5rem,
--btn-input-xs-font-size: var(--font-size-xs),
--btn-input-xs-line-height: 1.125,
--btn-input-xs-border-radius: var(--radius-5),

--btn-input-sm-gap: .375rem,
--btn-input-sm-min-height: 2rem,
--btn-input-sm-padding-y: .25rem,
--btn-input-sm-padding-x: .625rem,
--btn-input-sm-font-size: var(--font-size-sm),
--btn-input-sm-line-height: var(--line-height-sm),
--btn-input-sm-border-radius: var(--radius-5),

--btn-input-lg-gap: .375rem,
--btn-input-lg-min-height: 2.75rem,
--btn-input-lg-padding-y: .5rem,
--btn-input-lg-padding-x: 1rem,
--btn-input-lg-font-size: var(--font-size-md),
--btn-input-lg-line-height: var(--line-height-md),
--btn-input-lg-border-radius: var(--radius-7),