在GitHub上查看

表单

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

在本页

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

下拉列表 改进浏览器默认选择元素的自定义初始外观。

多选 & 单选 使用表单中的自定义单选按钮和复选框来选择输入选项。

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

输入框 为输入附加标签和按钮以增加语义价值。

浮动标签 创建漂亮简单的表单标签，浮动在输入字段上。

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

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

概述

Bootstrap的表单控件在我们重新启动的表单样式中扩展为类。使用这些类来选择它们的定制显示，以便在不同浏览器和设备之间实现更一致的呈现。

确保在所有输入上使用适当的 type 属性(例如，email表示电子邮件地址或 number 表示数字信息)，以利用新的输入控件，如电子邮件验证、数字选择等。

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

<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 样式。如果将使用块级元素，则会添加顶部边距，以便与上面的输入保持距离。

密码

密码长度为8-20个字符，包含字母和数字，不能包含空格、特殊字符、表情符号。

<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.

<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" 以将其状态发送给辅助技术。

<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 内容，一旦表单字段有内容就会消失）将有利于辅助技术用户，但是缺少可见标签文本对于某些用户来说仍然是个问题。某种形式的可见标签通常是最好的方法，无论是对于可访问性还是可用性。