表单

掌握Bootstrap表单控件和布局

全站首页 频道首页

Bootstrap表单概述

Bootstrap提供了丰富的表单控件和布局选项，帮助您快速创建美观且功能完善的表单。通过Bootstrap的表单样式，您可以轻松实现响应式设计，确保在各种设备上都有良好的用户体验。

核心概念： Bootstrap表单采用移动优先的设计理念，确保在各种设备上都有良好的用户体验。

表单的重要性

表单是网站与用户交互的关键组件，用于收集用户输入、处理数据和实现功能。良好的表单设计可以：

  • 提高用户填写表单的体验
  • 减少用户输入错误
  • 提高数据收集的效率
  • 增强网站的专业性和可信度

基本表单

使用Bootstrap创建基本的表单结构。

表单示例

我们不会与任何人共享您的邮箱地址。
基本表单代码 
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">我们不会与任何人共享您的邮箱地址。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">密码</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">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

表单元素说明

类名 用途 说明
.form-label 标签样式 为表单标签添加适当的间距和样式
.form-control 输入框样式 为文本输入框、选择框和文本域添加样式
.form-text 帮助文本 为表单下方的帮助文本添加样式
.form-check 复选框/单选按钮容器 包装复选框和单选按钮及其标签
.form-check-input 复选框/单选按钮 为复选框和单选按钮添加样式
.form-check-label 复选框/单选按钮标签 为复选框和单选按钮的标签添加样式

表单控件

Bootstrap提供了各种表单控件的样式。

输入框类型

表单控件代码 
<div class="mb-3">
  <label class="form-label">文本输入</label>
  <input type="text" class="form-control" placeholder="文本输入">
</div>
<div class="mb-3">
  <label class="form-label">邮箱输入</label>
  <input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="mb-3">
  <label class="form-label">密码输入</label>
  <input type="password" class="form-control" placeholder="密码">
</div>
<div class="mb-3">
  <label class="form-label">数字输入</label>
  <input type="number" class="form-control" placeholder="数字">
</div>
<div class="mb-3">
  <label class="form-label">日期输入</label>
  <input type="date" class="form-control">
</div>
<div class="mb-3">
  <label class="form-label">文件上传</label>
  <input type="file" class="form-control">
</div>
<div class="mb-3">
  <label class="form-label">颜色选择</label>
  <input type="color" class="form-control form-control-color">
</div>

选择控件

选择控件代码 
<!-- 单选按钮 -->
<div class="mb-3">
  <label class="form-label">单选按钮</label>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">默认单选按钮</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">默认选中单选按钮</label>
  </div>
</div>

<!-- 复选框 -->
<div class="mb-3">
  <label class="form-label">复选框</label>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">默认复选框</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">选中复选框</label>
  </div>
</div>

<!-- 选择菜单 -->
<div class="mb-3">
  <label class="form-label">选择菜单</label>
  <select class="form-select" aria-label="Default select example">
    <option selected>选择选项</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</div>

<!-- 多选菜单 -->
<div class="mb-3">
  <label class="form-label">多选菜单</label>
  <select class="form-select" multiple aria-label="Multiple select example">
    <option selected>选项一</option>
    <option value="1">选项二</option>
    <option value="2">选项三</option>
    <option value="3">选项四</option>
  </select>
</div>

文本域

文本域代码 
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">文本域示例</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入内容"></textarea>
</div>

输入框大小

Bootstrap提供了不同大小的输入框，以适应不同的设计需求。

输入框大小代码 
<div class="mb-3">
  <input class="form-control form-control-lg" type="text" placeholder="大输入框">
</div>
<div class="mb-3">
  <input class="form-control" type="text" placeholder="默认输入框">
</div>
<div class="mb-3">
  <input class="form-control form-control-sm" type="text" placeholder="小输入框">
</div>

表单布局

Bootstrap提供了多种表单布局选项，适应不同的设计需求。

水平表单

单选按钮
水平表单代码 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">单选按钮</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">第一个单选按钮</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">第二个单选按钮</label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">示例复选框</label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

内联表单

@
内联表单代码 
<form class="row g-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="inlineFormInput">用户名</label>
    <input type="text" class="form-control" id="inlineFormInput" placeholder="用户名">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="inlineFormInputGroup">用户名</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="用户名">
    </div>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">记住我</label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

浮动标签

浮动标签代码 
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">邮箱地址</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
  <label for="floatingPassword">密码</label>
</div>

表单验证

Bootstrap提供了客户端表单验证功能，帮助用户正确填写表单。

验证示例

看起来不错！
看起来不错！
@
请选择一个用户名。
请提供一个有效的城市。
请选择一个有效的省份。
请提供一个有效的邮编。
您必须同意才能提交。
表单验证代码 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">名字</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">看起来不错！</div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">姓氏</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">看起来不错！</div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">用户名</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">请选择一个用户名。</div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">城市</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">请提供一个有效的城市。</div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">省份</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">选择...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">请选择一个有效的省份。</div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">邮编</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">请提供一个有效的邮编。</div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">同意条款和条件</label>
      <div class="invalid-feedback">您必须同意才能提交。</div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">提交表单</button>
  </div>
</form>

验证JavaScript代码

表单验证JavaScript 
// 表单验证示例
(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)
    })
})()

浏览器内置验证

Bootstrap的表单验证与HTML5内置验证属性完美配合：

  • required - 标记必填字段
  • pattern - 定义输入模式
  • min/max - 设置数值范围
  • minlength/maxlength - 设置文本长度限制

自定义表单

Bootstrap提供了自定义表单控件，增强表单的视觉体验。

自定义选择菜单

自定义选择菜单代码 
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>打开此选择菜单</option>
  <option value="1">一</option>
  <option value="2">二</option>
  <option value="3">三</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>打开此选择菜单</option>
  <option value="1">一</option>
  <option value="2">二</option>
  <option value="3">三</option>
</select>

自定义文件上传

自定义文件上传代码 
<div class="mb-3">
  <label for="formFile" class="form-label">默认文件输入示例</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">多文件输入示例</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">禁用文件输入示例</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">小文件输入示例</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">大文件输入示例</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

自定义范围滑块

自定义范围滑块代码 
<label for="customRange1" class="form-label">示例范围</label>
<input type="range" class="form-range" id="customRange1">

表单最佳实践

可访问性考虑

  • 为所有表单控件添加适当的label标签
  • 使用aria-describedby关联帮助文本
  • 为表单分组使用fieldset和legend
  • 确保表单在键盘导航下可用

性能优化

  • 避免过多不必要的表单验证
  • 合理使用懒加载和分页处理大量表单数据
  • 优化图片和文件上传的大小限制

用户体验

  • 保持表单简洁，只收集必要信息
  • 使用清晰的标签和占位符文本
  • 提供即时反馈和错误提示
  • 考虑移动设备上的输入体验

下一步学习

现在你已经了解了Bootstrap的表单系统，下一步可以学习：

1

组件系统

学习使用丰富的UI组件

继续学习
2

定制化

学习如何定制Bootstrap样式

继续学习
3

实战项目

应用所学知识创建完整项目

继续学习