Bootstrap 表单与验证

表单是网页最重要的"用户输入"入口——登录、注册、下单、搜索都靠它。Bootstrap 的表单样式非常完整:输入框、选择框、复选框、单选、开关都有统一的 class,还内置了一套浏览器校验样式。这一章彻底搞懂表单。

1. 基础表单结构

每个表单字段都是 label + input 组合,Bootstrap 的标准结构是:

<!-- 基础表单:form-label + form-control -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="email"
           placeholder="name@example.com" />
  </div>

  <div class="mb-3">
    <label for="pwd" class="form-label">密码</label>
    <input type="password" class="form-control" id="pwd" />
  </div>

  <div class="mb-3">
    <label for="bio" class="form-label">个人简介</label>
    <textarea class="form-control" id="bio" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

• form-label:label 自动加下边距。
• form-control:input / textarea 共用的样式 class,自带 padding、边框、聚焦时的样式。
• mb-3:字段之间的下间距(margin-bottom: 1rem)。这是 Bootstrap 工具类的用法。
• label 的 for:必须指向 input 的 id,点击 label 会聚焦 input,无障碍必备。

2. 输入框尺寸与只读

<!-- 输入框尺寸:form-control-lg / sm -->
<input class="form-control form-control-lg" placeholder="大输入框" />
<input class="form-control" placeholder="默认大小" />
<input class="form-control form-control-sm" placeholder="小输入框" />

<!-- 纯文本展示(只读):form-control-plaintext -->
<div class="mb-3">
  <label class="form-label">用户名(不可改)</label>
  <input type="text" readonly class="form-control-plaintext" value="alice" />
</div>

• form-control-lg / sm:大 / 小尺寸输入框。
• form-control-plaintext:纯文本展示(只读)。用于"信息不可改"的字段,样式上仍然是 form-control 占位,但看起来像普通文字。
• readonly:HTML 属性,让 input 只读。

3. 下拉选择框:form-select

Bootstrap 把原生 select 美化得很精致:

<!-- form-select:下拉选择框 -->
<select class="form-select">
  <option selected>请选择...</option>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<!-- 多选(按住 Ctrl/Cmd) -->
<select class="form-select" multiple size="3">
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
</select>

<!-- 尺寸:form-select-lg / sm -->
<select class="form-select form-select-lg">...</select>

用法跟原生 select 一模一样,只是把 class 名从 form-control 改成 form-select。多选加 multiple + size 属性。

4. 复选框、单选与开关:form-check

复选框和单选框的结构稍特殊——它们用 form-check 包裹 input + label:

<!-- form-check:复选框 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="remember" />
  <label class="form-check-label" for="remember">记住我</label>
</div>

<!-- 默认选中 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="agree" checked />
  <label class="form-check-label" for="agree">同意条款</label>
</div>

<!-- 禁用 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="x" disabled />
  <label class="form-check-label" for="x">禁用项</label>
</div>

<!-- 单选按钮 -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender"
         id="male" checked />
  <label class="form-check-label" for="male">男</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female" />
  <label class="form-check-label" for="female">女</label>
</div>

<!-- 开关样式(form-switch):把复选框变 iOS 风格开关 -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="notify" />
  <label class="form-check-label" for="notify">接收通知</label>
</div>

• form-check:复选/单选容器。
• form-check-input:input 本身(Bootstrap 重写了它的样式)。
• checked / disabled:HTML 原生属性,默认选中 / 禁用。
• form-switch:把复选框变成 iOS 风格的开关。在设置页非常常用。

5. 行内复选/单选

想让多个复选框横向排列,加 form-check-inline:

<!-- 行内排列:form-check-inline -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="r" id="a" checked />
  <label class="form-check-label" for="a">选项 A</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="r" id="b" />
  <label class="form-check-label" for="b">选项 B</label>
</div>

6. 输入框前后缀:input-group

这是表单里最有用的组件之一——在输入框前后加图标、文字、按钮:

<!-- input-group:输入框 + 前后缀(图标、文字、按钮) -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="用户名" />
</div>

<!-- 网址前缀 -->
<div class="input-group mb-3">
  <span class="input-group-text">https://</span>
  <input type="text" class="form-control" placeholder="example.com" />
</div>

<!-- 金额:前面带 ¥,后面带 .00 -->
<div class="input-group mb-3">
  <span class="input-group-text">¥</span>
  <input type="number" class="form-control" />
  <span class="input-group-text">.00</span>
</div>

<!-- 输入框带按钮 -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="搜索..." />
  <button class="btn btn-primary" type="button">搜索</button>
</div>

结构:input-group > input-group-text(前后缀)+ form-control(输入框)。常见场景:

• 邮箱前缀 @、网址前缀 https://。
• 金额前缀 ¥ $。
• 搜索框后缀带"搜索"按钮。
• 验证码后缀带"获取验证码"按钮。

7. 表单栅格布局

Bootstrap 表单可以无缝配合栅格系统,实现复杂的两列、三列表单布局:

<!-- 表单栅格布局:配合 row + col 排列表单 -->
<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">名</label>
    <input type="text" class="form-control" />
  </div>
  <div class="col-md-6">
    <label class="form-label">姓</label>
    <input type="text" class="form-control" />
  </div>
  <div class="col-12">
    <label class="form-label">邮箱</label>
    <input type="email" class="form-control" />
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">提交</button>
  </div>
</form>

关键点:

• 外层 row g-3:用栅格 row,g-3 给字段之间加间距(水平和垂直都有)。
• 每个字段外层 col-md-6:在 md 及以上占 6 列(两列布局),小屏堆叠。
• 占满整行:用 col-12。

这种写法让表单自动响应式——桌面两列、手机一列,不用写一行 media query。

8. 表单校验

Bootstrap 提供了一套自定义的表单校验样式,替代浏览器默认的提示气泡:

<!-- 自定义校验样式:needs-validation + novalidate -->
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name" required />
    <div class="invalid-feedback">请输入姓名。</div>
  </div>
  <div class="col-md-4">
    <label for="email2" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email2" required />
    <div class="invalid-feedback">请输入有效邮箱。</div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree2" required />
      <label class="form-check-label" for="agree2">同意条款</label>
      <div class="invalid-feedback">必须同意才能提交。</div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">提交</button>
  </div>
</form>

关键四件套:

• needs-validation:加在 form 上,告诉 Bootstrap 这个表单要用自定义样式。
• novalidate:HTML 属性,关闭浏览器默认提示。
• required:HTML5 校验属性,必填。
• invalid-feedback:错误提示文字。默认隐藏,只有表单加 was-validated 后才显示。

9. 让校验生效的 JS

光写 HTML 校验还不行,需要一点 JS 在提交时给表单加 was-validated class:

// 提交时给表单加 .was-validated 触发校验样式
(function () {
  const forms = document.querySelectorAll('.needs-validation');
  Array.from(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault();      // 阻止提交
        event.stopPropagation();
      }
      form.classList.add('was-validated');  // 显示红/绿边框
    }, false);
  });
})();

这段代码的原理:

• 监听所有 .needs-validation 表单的 submit 事件。
• 用 HTML5 原生的 form.checkValidity() 检查每个字段。
• 不通过时阻止提交(preventDefault),给表单加 was-validated class——这时 Bootstrap 才会显示红/绿边框和 invalid-feedback 文字。

这是 Bootstrap 官方文档提供的标准片段,直接复制就能用。如果想做异步校验(比如查用户名是否被注册),需要在此基础上扩展。

小结

表单组件要点:

• 基础:form-label + form-control + mb-3。
• 选择:form-select(单选/多选)。
• 勾选:form-check + form-check-input,form-switch 是开关。
• 前后缀:input-group + input-group-text。
• 栅格:外层 row g-3,字段用 col-md-* 控制列数。
• 校验:needs-validation + novalidate + invalid-feedback,JS 加 was-validated。

下一篇看工具类——间距、flex、文本对齐这些"万能 class",Bootstrap 之所以能"不写 CSS"全靠它们。

← 上一篇 导航栏与导航

下一篇 工具类 →