Bootstrap 表单

表单是网站收集用户输入的入口。Bootstrap 5 的现代表单体系以 .form-control（输入控件）和 .form-label（标签）为核心，配合 .form-select、.form-check 等类，让输入框、下拉框、复选框在不同设备上观感一致。

输入控件基础

输入框、文本域统一使用 .form-control，下拉框用 .form-select，标签用 <label class="form-label"> 并通过 for 属性与控件关联：

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；最基本的文本输入 -->
<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="city" class="form-label">城市</label>
  <select class="form-select" id="city">
    <option selected>请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
  </select>
</div>

显示效果：输入框带浅色边框、聚焦时变蓝并出现光晕；下拉框显示「请选择」且自带箭头，二者宽度都占满父容器。

复选框、开关与单选框

复选框用 .form-check 包裹，.form-check-input 是控件、.form-check-label 是文字；把外层容器换成 .form-switch 即得到拨动开关：

<!-- 复选框与开关 -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">开启消息通知</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="sex" id="male" checked>
  <label class="form-check-label" for="male">男</label>
</div>

显示效果：第一项是拨动式开关且处于开启状态；第二项是圆形单选钮，同组（name 相同）点击时互斥。

水平排列表单

把控件放进 .row，配合 col-* 与 .col-form-label，即可让标签和输入框左右并排；用 g-3 控制列与列的间距：

<!-- 标签与输入框并排 -->
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="name" class="col-form-label">姓名</label>
  </div>
  <div class="col-auto">
    <input type="text" class="form-control" id="name" placeholder="请输入姓名">
  </div>
  <div class="col-auto">
    <button class="btn btn-primary">提交</button>
  </div>
</div>

显示效果：标签、输入框、按钮在同一行内垂直居中，间距均匀，整体呈紧凑的水平表单。

输入框组与校验

.input-group 可在输入框前后追加前缀文字或按钮（如货币符号、@）；配合 .was-validated 与 .is-invalid 还能显示红色错误提示：

<!-- 输入框组：前缀单位 -->
<div class="input-group mb-3">
  <span class="input-group-text">¥</span>
  <input type="number" class="form-control" value="99">
</div>
<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="用户名">
</div>

显示效果：两个输入框左侧分别拼接了「¥」和「@」的灰色小方块，形成一个整体控件，适合金额、账号等带单位的输入。

小结

Bootstrap 表单的核心是「.form-control 管控件、.form-label 管标签、.form-check 管选择项」，再按需使用 .form-select、.input-group 与网格类即可搭建任意复杂度的表单。