表单
用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。
概览
Bootstrap 的表单控件通过类扩展了我们重置的表单样式。 使用这些类来选择它们的自定义显示，以便在浏览器和设备之间实现更一致的呈现。
确保在所有输入框 <input> 上使用适当的 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-describeby 属性明确地与它相关的表单控件相关联。 这将确保辅助技术（例如屏幕阅读器）在用户聚焦或进入控件时宣布此表单文本。
输入框下方的表单文本可以使用 .form-text 设置样式。 如果使用在块级元素上，则会添加上边距以便与上面的输入框保持间距。
<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 类。
<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> 或适当的文本内容的情况，仍有其他方法可以提供可访问的名称，例如：
- 使用
.visually-hidden类隐藏<label>元素 - 使用
aria-labelledby指向可以充当标签的现有元素 - 提供
title属性 - 使用
aria-label显式设置元素的可访问名称
如果这些都不存在，辅助技术可能会求助于使用 placeholder 属性作为 <input> 和 <textarea> 元素上的可访问名称的后备。 本节中的示例提供了一些建议的、特定于案例的方法。
在使用视觉隐藏的内容时（.visually-hidden、aria-label，甚至是 placeholder 内容，一旦表单字段有内容就会消失） 将有利于辅助技术用户，但对于某些用户来说，缺少可见的标签文本可能仍然是个问题。 对于可访问性和可用性而言，某种形式的可见标签通常是最好的方法。
Sass
许多表单变量被设置在一个通用级别，以供单个表单组件重用和扩展。 你会经常看到这些是 $btn-input-* 和 $input-* 变量。
变量
$btn-input-* 变量是我们的 buttons 和表单组件之间共享的全局变量。 您会发现这些经常作为值重新分配给其他特定于组件的变量。
$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: $border-width;