Bootstrap 表单组件 #

表单是网页中收集用户数据的重要组件。Bootstrap 提供了丰富的表单样式和功能，帮助你快速创建美观、易用的表单。

表单控件 #

文本输入框 #

html

<div class="mb-3">
  <label for="email" class="form-label">邮箱地址</label>
  <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>

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

文本域 #

html

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

文件输入 #

html

<div class="mb-3">
  <label for="file" class="form-label">上传文件</label>
  <input class="form-control" type="file" id="file">
</div>

<!-- 多文件上传 -->
<div class="mb-3">
  <label for="files" class="form-label">上传多个文件</label>
  <input class="form-control" type="file" id="files" multiple>
</div>

下拉选择框 #

html

<div class="mb-3">
  <label for="city" class="form-label">选择城市</label>
  <select class="form-select" id="city">
    <option selected>请选择...</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</div>

<!-- 多选下拉 -->
<div class="mb-3">
  <label for="cities" class="form-label">选择多个城市</label>
  <select class="form-select" id="cities" multiple>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>
</div>

复选框和单选框 #

复选框 #

html

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">默认复选框</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check2" checked>
    <label class="form-check-label" for="check2">已选中</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check3" disabled>
    <label class="form-check-label" for="check3">禁用复选框</label>
  </div>
</div>

单选框 #

html

<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="male">
    <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>
</div>

内联排列 #

html

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inline1" value="1">
  <label class="form-check-label" for="inline1">选项一</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inline2" value="2">
  <label class="form-check-label" for="inline2">选项二</label>
</div>

开关 #

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1">
  <label class="form-check-label" for="switch1">开关选项</label>
</div>

范围滑块 #

html

<div class="mb-3">
  <label for="range" class="form-label">音量</label>
  <input type="range" class="form-range" id="range" min="0" max="100">
</div>

颜色选择器 #

html

<div class="mb-3">
  <label for="color" class="form-label">选择颜色</label>
  <input type="color" class="form-control form-control-color" id="color" value="#563d7c">
</div>

数据列表 #

html

<label for="browser" class="form-label">选择浏览器</label>
<input class="form-control" list="browsers" id="browser" placeholder="输入或选择...">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

表单尺寸 #

输入框尺寸 #

html

<input class="form-control form-control-lg" type="text" placeholder="大输入框">
<input class="form-control" type="text" placeholder="默认输入框">
<input class="form-control form-control-sm" type="text" placeholder="小输入框">

选择框尺寸 #

html

<select class="form-select form-select-lg">...</select>
<select class="form-select">...</select>
<select class="form-select form-select-sm">...</select>

只读和禁用 #

只读状态 #

html

<input class="form-control" type="text" value="只读内容" readonly>

禁用状态 #

html

<input class="form-control" type="text" value="禁用内容" disabled>
<select class="form-select" disabled>...</select>

纯文本只读 #

html

<div class="mb-3 row">
  <label for="email" class="col-sm-2 col-form-label">邮箱</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="email" value="email@example.com">
  </div>
</div>

表单布局 #

垂直布局（默认） #

html

<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

水平布局 #

html

<form>
  <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
    </div>
  </div>
  <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

栅格布局 #

html

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">姓</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">名</label>
      <input type="text" class="form-control" id="lastName">
    </div>
    <div class="col-12">
      <label for="address" class="form-label">地址</label>
      <input type="text" class="form-control" id="address">
    </div>
    <div class="col-md-6">
      <label for="city" class="form-label">城市</label>
      <input type="text" class="form-control" id="city">
    </div>
    <div class="col-md-4">
      <label for="state" class="form-label">省份</label>
      <select class="form-select" id="state">
        <option selected>选择...</option>
      </select>
    </div>
    <div class="col-md-2">
      <label for="zip" class="form-label">邮编</label>
      <input type="text" class="form-control" id="zip">
    </div>
  </div>
</form>

内联表单 #

html

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="username">用户名</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="username" placeholder="用户名">
    </div>
  </div>
  <div class="col-12">
    <label class="visually-hidden" for="preference">偏好</label>
    <select class="form-select" id="preference">
      <option selected>选择...</option>
      <option value="1">选项一</option>
      <option value="2">选项二</option>
    </select>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="remember">
      <label class="form-check-label" for="remember">记住我</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

输入框组 #

基础用法 #

html

<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">
  <input type="text" class="form-control" placeholder="搜索...">
  <button class="btn btn-primary" type="button">搜索</button>
</div>

两端添加内容 #

html

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control">
  <span class="input-group-text">.00</span>
</div>

复选框和单选框 #

html

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input" type="checkbox" id="check1">
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input" type="radio" name="radio1">
  </div>
  <input type="text" class="form-control">
</div>

多输入框 #

html

<div class="input-group">
  <span class="input-group-text">姓名</span>
  <input type="text" class="form-control" placeholder="姓">
  <input type="text" class="form-control" placeholder="名">
</div>

下拉菜单 #

html

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    操作
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作一</a></li>
    <li><a class="dropdown-item" href="#">操作二</a></li>
  </ul>
  <input type="text" class="form-control">
</div>

尺寸 #

html

<div class="input-group input-group-lg mb-3">
  <span class="input-group-text">大</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">默认</span>
  <input type="text" class="form-control">
</div>

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">小</span>
  <input type="text" class="form-control">
</div>

浮动标签 #

html

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
  <label for="floatingEmail">邮箱地址</label>
</div>

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

<div class="form-floating">
  <textarea class="form-control" id="floatingTextarea" placeholder="留言"></textarea>
  <label for="floatingTextarea">留言</label>
</div>

下拉选择框 #

html

<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
  <label for="floatingSelect">选择选项</label>
</div>

表单验证 #

基础验证 #

html

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationCustom01" class="form-label">姓名</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="valid-feedback">输入正确！</div>
    <div class="invalid-feedback">请输入姓名。</div>
  </div>
  
  <div class="mb-3">
    <label for="validationCustom02" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="validationCustom02" required>
    <div class="valid-feedback">输入正确！</div>
    <div class="invalid-feedback">请输入有效的邮箱地址。</div>
  </div>
  
  <button class="btn btn-primary" type="submit">提交</button>
</form>

<script>
(function() {
  'use strict'
  var forms = document.querySelectorAll('.needs-validation')
  Array.prototype.slice.call(forms).forEach(function(form) {
    form.addEventListener('submit', function(event) {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

浏览器默认验证 #

html

<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="email" required>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
</form>

工具提示样式 #

html

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip01" class="form-label">姓名</label>
    <input type="text" class="form-control" id="validationTooltip01" required>
    <div class="valid-tooltip">输入正确！</div>
    <div class="invalid-tooltip">请输入姓名。</div>
  </div>
  <div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="validationTooltip02" required>
    <div class="valid-tooltip">输入正确！</div>
    <div class="invalid-tooltip">请输入有效的邮箱。</div>
  </div>
</form>

验证状态类 #

html

<!-- 有效状态 -->
<input class="form-control is-valid" value="正确">
<div class="valid-feedback">输入正确！</div>

<!-- 无效状态 -->
<input class="form-control is-invalid" value="错误">
<div class="invalid-feedback">请输入正确的内容。</div>

表单帮助文本 #

html

<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" aria-describedby="passwordHelp">
<div id="passwordHelp" class="form-text">
  密码必须包含 8-20 个字符，包括字母和数字。
</div>

禁用表单 #

使用 <fieldset> 禁用整个表单：

html

<form>
  <fieldset disabled>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">禁用输入框</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="禁用输入框">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">禁用选择框</label>
      <select id="disabledSelect" class="form-select">
        <option>禁用选择</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>

实战案例 #

登录表单 #

html

<form class="p-4 border rounded shadow-sm" style="max-width: 400px;">
  <h3 class="mb-4 text-center">登录</h3>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="loginEmail" placeholder="邮箱">
    <label for="loginEmail">邮箱地址</label>
  </div>
  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="loginPassword" placeholder="密码">
    <label for="loginPassword">密码</label>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="rememberMe">
    <label class="form-check-label" for="rememberMe">记住我</label>
  </div>
  <div class="d-grid">
    <button class="btn btn-primary" type="submit">登录</button>
  </div>
  <p class="text-center mt-3 mb-0">
    <a href="#">忘记密码？</a>
  </p>
</form>

注册表单 #

html

<form class="p-4 border rounded">
  <h3 class="mb-4">注册账号</h3>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">姓</label>
      <input type="text" class="form-control" id="firstName" required>
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">名</label>
      <input type="text" class="form-control" id="lastName" required>
    </div>
    <div class="col-12">
      <label for="email" class="form-label">邮箱</label>
      <input type="email" class="form-control" id="email" required>
    </div>
    <div class="col-12">
      <label for="password" class="form-label">密码</label>
      <input type="password" class="form-control" id="password" required>
    </div>
    <div class="col-12">
      <label for="confirmPassword" class="form-label">确认密码</label>
      <input type="password" class="form-control" id="confirmPassword" required>
    </div>
    <div class="col-12">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="terms" required>
        <label class="form-check-label" for="terms">
          我已阅读并同意 <a href="#">服务条款</a>
        </label>
      </div>
    </div>
    <div class="col-12">
      <button class="btn btn-primary w-100" type="submit">注册</button>
    </div>
  </div>
</form>

搜索表单 #

html

<form class="d-flex">
  <div class="input-group">
    <input class="form-control" type="search" placeholder="搜索...">
    <button class="btn btn-primary" type="submit">搜索</button>
  </div>
</form>

联系表单 #

html

<form>
  <div class="mb-3">
    <label for="contactName" class="form-label">姓名</label>
    <input type="text" class="form-control" id="contactName">
  </div>
  <div class="mb-3">
    <label for="contactEmail" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="contactEmail">
  </div>
  <div class="mb-3">
    <label for="contactSubject" class="form-label">主题</label>
    <select class="form-select" id="contactSubject">
      <option selected>请选择主题</option>
      <option value="general">一般咨询</option>
      <option value="support">技术支持</option>
      <option value="feedback">意见反馈</option>
    </select>
  </div>
  <div class="mb-3">
    <label for="contactMessage" class="form-label">留言内容</label>
    <textarea class="form-control" id="contactMessage" rows="5"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">发送留言</button>
</form>

最佳实践 #

1. 始终添加标签 #

html

<!-- 推荐 -->
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email">

<!-- 不推荐：无标签 -->
<input type="email" class="form-control" placeholder="邮箱">

2. 使用正确的输入类型 #

html

<!-- 推荐：使用合适的类型 -->
<input type="email" class="form-control">
<input type="tel" class="form-control">
<input type="url" class="form-control">
<input type="number" class="form-control">

3. 提供帮助文本 #

html

<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password">
<div class="form-text">密码至少 8 个字符</div>

4. 表单验证反馈 #

html

<input class="form-control is-invalid" required>
<div class="invalid-feedback">请填写此字段。</div>

下一步 #

现在你已经掌握了表单组件，接下来学习导航栏组件，了解如何创建响应式导航！