• 前端
• UI组件

本指南以 BOOTSTRA.386 仓库内 Forms 总览文档 为核心，系统讲解 Bootstrap 5.3 表单控件的类体系、禁用态处理、无障碍要求、布局方式与校验机制，并结合仓库源码揭示其在 DOS 复古主题下的实际渲染方式。读完本文，你将能够在这个 1980s 风格的主题中编写可访问、可校验、布局正确的表单页面。

表单总览：基于 Reboot 的定制化表单样式

BOOTSTRA.386 是基于 Bootstrap 5.3 构建的复古主题，其表单体系继承自 Bootstrap 官方文档中 Reboot 表单样式（label允许使用margin控制间距、fieldset被重置为标准的块级元素、legend通过float: left表现为块级元素等），再通过.form-*系列类提供跨浏览器、跨设备的一致渲染。

使用表单控件时，必须为所有<input>设置合适的type属性（如邮箱用email、数值用number），以利用浏览器提供的邮箱校验、数值选择等原生输入能力。下面是最基本的表单示例，它用到了.mb-3间距工具类、.form-label、.form-control、.form-text与.form-check等核心类：

<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-label控制标签样式、form-control定制文本输入框、form-text提供辅助说明文字、form-check统一复选框布局。其余更细的类（form-select、form-range、form-floating、input-group等）详见 Forms 子文档目录 中的对应页面，下文会逐一展开。

表单控件类体系速览

Forms 总览的前置元数据列出了八个子主题，本节按用途归纳核心类，方便快速查阅。

文本输入.form-control

.form-control适用于<input>与<textarea>。在源码 scss/forms/_form-control.scss 中可以看到它的完整定义：display: block; width: 100%使其默认占满整行并垂直堆叠；appearance: none修复了 Safari 中日期输入的表现；同时通过::placeholder、:focus、:disabled与&::file-selector-button伪元素分别处理占位符、聚焦态、禁用态与文件上传按钮。

尺寸由.form-control-lg与.form-control-sm控制，对应源码中$input-height-lg/$input-height-sm的计算结果：

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

辅助说明文字使用.form-text，可以放在输入框下方（块级），也可以内联任意 HTML 元素（如<span>、<small>）。官方文档特别提示：必须用aria-describedby把辅助文字与控件显式关联，屏幕阅读器才会在聚焦控件时播报它：

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

其他实用变体还包括：readonly只读态（仍可聚焦与选中）、.form-control-plaintext（把只读输入渲染成无边框纯文本，常用于水平表单展示静态值）、type="file"文件输入（支持multiple、disabled、尺寸变体）、type="color"加.form-control-color的颜色选择器，以及用<datalist>提供输入联想（受浏览器样式限制较多）。

下拉选择.form-select

.form-select仅定制<select>的初始外观——由于浏览器限制，<option>列表无法被样式化。源码 scss/forms/_form-select.scss 通过 CSS 变量--bs-form-select-bg-img注入自定义箭头 SVG，并配合appearance: none移除原生外观。它支持form-select-lg/form-select-sm尺寸、multiple多选、size属性与disabled禁用：

<select class="form-select" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

复选框与单选.form-check

.form-check系列类（.form-check-input+.form-check-label）完全重写了浏览器原生的 checkbox 与 radio。实现上<input>与<label>是兄弟元素，通过id/for关联，并用兄弟选择器（~）对:checked、:disabled等状态进行联动样式（见 scss/forms/_form-check.scss 中的.form-check-input:checked ~ .form-check-label）。选中与半选（indeterminate）状态使用内联 SVG 图标。

常用变体包括：

• .form-switch：把复选框渲染为开关，建议加role="switch"让辅助技术正确播报；
• .form-check-inline：同一行排列多个选项；
• .form-check-reverse：把控件放到标签右侧；
• 无标签场景：省略.form-check包裹，但仍需用aria-label提供可访问名称；
• .btn-check+.btn：做成按钮样式的切换（屏幕阅读器仍会播报为 "checked"/"not checked"）。

范围滑块.form-range

<input type="range">加.form-range即可获得统一外观。轨道（track）与滑块（thumb）样式定义在 scss/forms/_form-range.scss 中。注意两点：目前不支持轨道填充效果（只有 Firefox 支持）；min/max隐式默认为0/100，可用属性覆盖，step默认按整数步进，可设为小数如step="0.5"：

<label for="customRange3" class="form-label">Example range</label> <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

输入组.input-group

.input-group在输入框两侧附加文本、按钮或按钮组（源码见 scss/forms/_input-group.scss），注意<label>必须放在 input-group 之外：

<div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div>

关键规则：默认flex-wrap: wrap以容纳校验反馈，可用.flex-nowrap关闭；尺寸类（input-group-sm/input-group-lg）加在.input-group自身即可让内部元素整体缩放；还支持复选框/单选作 addon、多输入框、多 addon、按钮 addon、带下拉的按钮与分段按钮（dropdown-toggle-split），以及自定义.form-select和文件输入。

浮动标签.form-floating

.form-floating包裹一对.form-control与<label>即可实现标签悬浮效果。实现机制很巧妙：每个<input>必须带placeholder，因为纯 CSS 实现依赖:placeholder-shown伪类判断是否显示标签（见 scss/forms/_floating-labels.scss），且<input>必须在前以配合兄弟选择器：

<div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div>

使用要点：输入已有value时标签自动上浮；<textarea>自定义高度不要用rows属性，而应显式设置height；.form-select也支持浮动标签但始终处于上浮态，且不支持size/multiple；校验样式、禁用态、.form-control-plaintext与.input-group组合均可正常工作。

禁用表单：disabled属性与<fieldset disabled>

在单个输入框上添加disabled布尔属性即可阻止交互并淡化外观：

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

更强大的做法是把disabled加到<fieldset>上，一次性禁用其中所有原生控件——浏览器会把<fieldset disabled>内的<input>、<select>、<button>全部视为禁用，同时阻止键盘与鼠标交互：

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

重要边界：如果表单里还有自定义的按钮式链接元素（如<a class="btn btn-*">），它们只会被施加pointer-events: none，仍然可聚焦、可被键盘操作。此时必须手动补充tabindex="-1"阻止聚焦，并用aria-disabled="disabled"向辅助技术声明其禁用状态。

无障碍（Accessibility）：为每个控件提供可访问名称

表单控件的无障碍核心是可访问名称（accessible name），让辅助技术用户理解控件的用途。最简单的方式是使用<label>，按钮则把描述性文字放在<button>...</button>内容中。当无法提供可见<label>或文字内容时，可按优先级选用以下替代方案：

• 用.visually-hidden隐藏但仍留在 DOM 中的<label>；
• 用aria-labelledby指向页面上可作为标签的现有元素；
• 提供title属性；
• 用aria-label显式设置可访问名称。

如果以上都不存在，辅助技术会退而使用placeholder作为<input>/<textarea>可访问名称的回退。需要强调的是：虽然视觉隐藏内容（.visually-hidden、aria-label，甚至内容输入后会消失的placeholder）对辅助技术用户有帮助，但对某些用户而言，可见标签仍然是最佳方案——它同时服务于无障碍与可用性。

布局：从垂直堆叠到网格与水平表单

Bootstrap 的几乎所有表单控件都带有display: block和width: 100%，因此表单默认垂直堆叠（见 布局文档）。可以通过类来改变单次表单的布局：

• 间距工具类：margin-bottom工具类（如mb-3）是给表单分组的最简单手段，建议全表单统一使用单一方向；
• 表单网格：使用网格类（.row+.col）实现多列与宽度控制，需要启用$enable-grid-classesSass 变量（默认开启）；g-3等 gutter 修改类可控制沟槽宽度；
• 水平表单：给表单组加.row，用.col-*-*指定标签与控件宽度，并给<label>加.col-form-label实现垂直居中；标签尺寸用.col-form-label-sm/.col-form-label-lg与.form-control-sm/.form-control-lg配对；
• 列尺寸：.col-sm-7等指定列可占据更多空间，其余.col-sm自动平分剩余宽度；
• 自动尺寸：.col-auto让列按内容自适应，配合align-items-center等 flexbox 工具垂直居中；也可混合col-sm-3尺寸类；
• 内联表单：.row-cols-lg-auto实现响应式水平排列，配合g-3与align-items-center，窄屏下用.col-12自动堆叠。

表单校验：was-validated、自定义样式与服务端校验

Bootstrap 5.3 的校验机制基于 CSS 的:invalid/:valid伪类（作用于<input>、<select>、<textarea>），核心规则如下（完整流程见 校验文档）：

• 校验样式被限定在父级.was-validated类（通常加在<form>上）作用域内，否则必填但为空的字段在页面加载时就会显示为无效；
• Ajax 动态提交后，移除.was-validated可重置表单外观；
• 服务端校验则直接使用.is-invalid/.is-valid类作为回退，不要求.was-validated父类；
• 由于 CSS 限制，目前无法仅靠 CSS 给位于控件之前的<label>应用校验样式，需要自定义 JavaScript 配合；
• 反馈信息可使用浏览器默认提示（各浏览器样式不同、无法用 CSS 定制），或 Bootstrap 自定义反馈样式。

自定义校验样式

在<form>上添加novalidate关闭浏览器默认气泡，同时保留校验 API。配合needs-validation类与示例脚本 validate-forms.js，JavaScript 会在submit事件中调用form.checkValidity()，校验失败时preventDefault()阻止提交，并给表单添加was-validated以激活:invalid/:valid样式。反馈文本写在valid-feedback/invalid-feedback元素中；输入组内的校验需额外加.has-validation类修复边框圆角问题：

<form class="row g-3 needs-validation" novalidate> <div class="col-md-4"> <label for="validationCustom01" class="form-label">First name</label> <input type="text" class="form-control" id="validationCustom01" value="Mark" required> <div class="valid-feedback">Looks good!</div> </div> <div class="col-md-4"> <label for="validationCustomUsername" class="form-label">Username</label> <div class="input-group has-validation"> <span class="input-group-text" id="inputGroupPrepend">@</span> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required> <div class="invalid-feedback">Please choose a username.</div> </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit form</button> </div> </form>

校验样式覆盖.form-control、.form-select、.form-check及输入组内的单个.form-control；背景图标仅对.form-select（而非.form-control）生效。若布局允许，可把反馈类换成valid-tooltip/invalid-tooltip以工具提示形式展示，但父级需要position: relative定位。

服务端校验与自定义消息

服务端返回错误时，直接给控件加.is-invalid/.is-valid类，并把错误消息元素通过aria-describedby（可引用多个id）与字段关联：

<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required> <div id="validationServer03Feedback" class="invalid-feedback">Please provide a valid city.</div>

自定义校验消息可通过 JavaScript 的setCustomValidity方法实现。当前文档也提醒：客户端自定义校验样式与工具提示暂时无法暴露给辅助技术，在解决之前建议优先采用服务端校验或浏览器默认校验方式。

CSS 与 Sass 变量体系：主题定制的基础

Bootstrap 5.3 表单的样式由两套变量驱动，这也是 BOOTSTRA.386 复古外观的根源：

• $input-btn-*变量：按钮与表单组件共享的全局变量（定义于 scss/_variables.scss），常被赋值给各组件专属变量复用。例如$input-padding-y: $input-btn-padding-y、$btn-padding-y: $input-btn-padding-y；
• $input-*变量：各表单控件共享（不含按钮），如$input-bg、$input-border-color、$input-focus-box-shadow、$input-height等（scss/_variables.scss）。

按组件划分，还有$form-label-*、$form-text-*、$form-check-*、$form-switch-*、$input-group-*、$form-select-*、$form-range-*、$form-file-*、$form-floating-*等系列变量（集中在 scss/_variables.scss）。

校验相关变量是理解 5.3 版本演进的关键：表单校验改用本地 CSS 变量实现实时定制，值由 Sass 设置（仍支持 Sass 定制）。CSS 变量定义在 _root.scss（--bs-form-valid-color、--bs-form-invalid-border-color等），且支持暗色模式自适应——暗色下由 _variables-dark.scss 中的$form-valid-color-dark/$form-invalid-color-dark覆盖。

校验状态的生成链路清晰可查：

1. Sass map$form-validation-states（scss/_variables.scss）定义valid/invalid两个状态的color、icon、tooltip-color、tooltip-bg-color、focus-box-shadow、border-color；
2. Sass 循环遍历该 map（scss/forms/_validation.scss）调用form-validation-statemixin；
3. mixin（scss/mixins/_forms.scss）生成.valid-feedback/.invalid-feedback、.valid-tooltip/.invalid-tooltip，并通过form-validation-state-selector限定作用域到.was-validated :invalid与.is-invalid，同时处理背景图标、焦点阴影与输入组 z-index。

需要扩展校验状态时，直接覆盖或扩充$form-validation-statesmap 即可，编译后的 CSS 会经由循环自动反映变更。

结合 BOOTSTRA.386 主题的源码印证

从 scss/_variables.scss 可以看到，BOOTSTRA.386 的颜色系统直接取自 EGA 调色板（$blue: #0000aa、$green: #00aa00、$red: #aa0000、$grayLight: #aaaaaa等），这决定了表单控件在主题下的边框与背景基调。

而 DOS 风格的关键细节在于去圆角：表单相关的圆角变量全部为0，例如$form-check-input-border-radius: 0、$form-check-radio-border-radius: 0、$form-switch-border-radius: 0、$form-range-track-border-radius: 0、$form-range-thumb-border-radius: 0（scss/_variables.scss），与复古终端方块风格保持一致。同时，输入框与按钮的默认内边距被置为0（$input-btn-padding-y: 0、$input-btn-padding-x: 0），实际间距主要由行高与网格系统承担。此外，主题还在 scss/_dos.scss 中实现了 DOS 风格的滚动条与文本光标（mix-blend-mode: difference的绿色块状光标），可与表单页面协同营造完整的复古体验。

结语

BOOTSTRA.386 的 Forms 文档（总览 及 表单子文档目录）提供了从控件类、禁用态、无障碍到布局与校验的完整表单体系。理解.form-*类矩阵、.was-validated作用域机制以及$input-btn-*/$input-*/$form-validation-states三层变量体系，是在这个 DOS 复古主题中构建可靠表单的关键；而主题将全部圆角归零、采用 EGA 色板的做法，则为表单外观提供了鲜明的 1980s 特征。

• 前端
• UI组件