表单（Forms）
Bootstrap表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。
概述
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>禁用表单
在输入上添加 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明确设置元素的可访问名称
如果不存在这些属性，辅助技术可能会在 <input> 和 <textarea> 元素上使用 placeholder 属性作为可访问名称的后备。本节中的示例提供了一些针对具体情况的建议方法。
虽然使用视觉隐藏内容（.visually-hidden、aria-label，甚至是 placeholder内容，一旦表单字段有了内容就会消失）对辅助技术用户有利，但缺乏可见标签文本对某些用户来说可能仍然是个问题。一般来说，某种形式的可见标签对于可访问性和可用性来说都是最好的方法。
CSS
许多表单变量都是在一般级别上设置的，以便各个表单组件重复使用和扩展。最常见的是 $input-btn-* 和 $input-* 变量。
Sass 变量
$input-btn-* 变量是 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: $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);