5. 表单

这是什么：Bootstrap 表单 = 给 input、select、textarea 加统一类名（form-control、form-select、form-check），再用栅格把字段排成规整的两列或多列。

为什么用：HTML 教程学过 <form> 有哪些控件，但浏览器默认的输入框长短不一、间距混乱。Bootstrap 把「表单长得整齐」这件事变成固定骨架；配合浏览器原生校验，用户填错还能当场提示。

如何用：本章示例可运行，试着留空必填项、乱填邮箱直接点提交，看校验提示。

5.1 单个字段的骨架

每个字段三层：label + 控件 + 可选的 form-text 提示。

<form class="m-4 p-4 border rounded bg-light" style="max-width:480px">
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email"
           placeholder="name@example.com" required>
    <div class="form-text">我们只用它发教程更新，不会骚扰你。</div>
  </div>

  <div class="mb-3">
    <label for="level" class="form-label">当前水平</label>
    <select class="form-select" id="level">
      <option selected>请选择…</option>
      <option>零基础</option>
      <option>会 HTML/CSS</option>
      <option>JS 也在学</option>
    </select>
  </div>

  <div class="mb-3">
    <label for="msg" class="form-label">留言</label>
    <textarea class="form-control" id="msg" rows="3"></textarea>
  </div>

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

form-control：文本类控件（input/textarea）统一加，负责宽度 100%、内边距、聚焦蓝框
form-select：下拉框的对应物
form-label：让标签间距正常；mb-3 是字段间距（第 6 章细讲间距类）

5.2 勾选与单选：form-check 三件套

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="c1" checked>
  <label class="form-check-label" for="c1">订阅教程更新</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="goal" id="r1">
  <label class="form-check-label" for="r1">找工作</label>
</div>

<!-- 开关样式、一排按钮样式 -->
<div class="form-check form-switch mt-2">
  <input class="form-check-input" type="checkbox" id="sw" checked>
  <label class="form-check-label" for="sw">深色模式</label>
</div>

结构固定：form-check 包壳 → form-check-input 是真控件 → form-check-label 写文字。单选靠 name 相同分组（HTML 教程的老知识，Bootstrap 不改机制只改长相）。

5.3 栅格排版表单

字段多时，用第 3 章的栅格直接分栏：

<form class="row g-3 m-4 p-4 border rounded">
  <div class="col-md-6">
    <label class="form-label" for="f1">姓</label>
    <input class="form-control" id="f1" required>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="f2">名</label>
    <input class="form-control" id="f2" required>
  </div>
  <div class="col-12">
    <label class="form-label" for="f3">城市</label>
    <input class="form-control" id="f3">
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">提交</button>
  </div>
</form>

row g-3 管列间距，字段想多宽就给多宽的 col-*——表单和页面共用一套栅格语言，这就是 Bootstrap 体系一致的好处。

5.4 校验：浏览器原生 + 类名两档

第一档（零配置）：给 input 加 required、type="email"，浏览器提交时自动拦住空值和乱格式，原生提示。本地演示建议加 onsubmit="return false" 防跳转。

第二档（JS 定制样式）：Bootstrap 官方的「valid/invalid」风格，给 form 加 was-validated，配合 invalid-feedback 文案：

<form class="was-validated m-4 p-4 border rounded" style="max-width:420px" onsubmit="return false">
  <div class="mb-3">
    <label class="form-label" for="v1">昵称（必填）</label>
    <input class="form-control" id="v1" required>
    <div class="invalid-feedback">昵称不能为空哦。</div>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
</form>

留空点提交：输入框变红圈、下方冒出红字。valid-feedback / is-valid 同理是绿色版。真正的「按后端规则校验」要写 JS，那超出 Bootstrap 范畴，AJAX 教程的 fetch 可以接上。

5.5 小结

三层骨架：form-label → form-control/form-select → form-text
勾选单选：form-check 壳 + -input + -label
排版直接用栅格 row g-3 + col-*
校验先吃浏览器免费的（required），要样式再上 was-validated

表单会做了，下一章学「不写 CSS 也能微调页面」的工具类。