Bootstrap 5 表单教程 - 创建现代化交互式表单

Bootstrap 5 表单介绍

Bootstrap 5 提供了一套完整的表单样式和组件，可以帮助您快速构建美观、一致的表单界面。

Bootstrap 5 表单的特点：

丰富的表单控件样式
灵活的布局选项
内置表单验证功能
自定义表单控件
响应式设计
无障碍访问支持

使用Bootstrap 5的表单组件，可以大大减少编写自定义CSS的工作量。

表单组件优势

美观一致

统一的视觉设计

快速开发

减少自定义CSS

响应式

适配各种设备

验证功能

内置表单验证

基本表单结构

Bootstrap 5 表单的基本结构包含表单标签、表单控件和表单帮助文本。

邮箱地址

我们不会与任何人共享您的邮箱。

密码

记住我

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <div 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>

表单控件

Bootstrap 5 提供了丰富的表单控件样式，包括文本输入、选择框、复选框、单选按钮等。

文本输入

使用 .form-control 类设置文本输入框样式：

文本输入

邮箱输入

密码输入

<div class="mb-3">
  <label for="textInput" class="form-label">文本输入</label>
  <input type="text" class="form-control" id="textInput">
</div>
<div class="mb-3">
  <label for="emailInput" class="form-label">邮箱输入</label>
  <input type="email" class="form-control" id="emailInput">
</div>
<div class="mb-3">
  <label for="passwordInput" class="form-label">密码输入</label>
  <input type="password" class="form-control" id="passwordInput">
</div>

文本域

使用 .form-control 类设置文本域样式：

文本域

只读文本域

这是一个只读的文本域示例。

禁用文本域

<div class="mb-3">
  <label for="textareaInput" class="form-label">文本域</label>
  <textarea class="form-control" id="textareaInput" rows="3"></textarea>
</div>
<div class="mb-3">
  <label for="textareaInput2" class="form-label">只读文本域</label>
  <textarea class="form-control" id="textareaInput2" rows="2" readonly></textarea>
</div>
<div class="mb-3">
  <label for="textareaInput3" class="form-label">禁用文本域</label>
  <textarea class="form-control" id="textareaInput3" rows="2" disabled></textarea>
</div>

选择框

使用 .form-select 类设置选择框样式：

默认选择框

多选选择框

按住Ctrl键可以选择多个选项。

禁用选择框

<div class="mb-3">
  <label for="selectInput" class="form-label">默认选择框</label>
  <select class="form-select" id="selectInput">
    <option selected>请选择一个选项</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
</div>
<div class="mb-3">
  <label for="multipleSelect" class="form-label">多选选择框</label>
  <select class="form-select" id="multipleSelect" multiple>
    <option selected>选项一</option>
    <option value="1">选项二</option>
    <option value="2">选项三</option>
  </select>
</div>

复选框和单选按钮

使用 .form-check 类设置复选框和单选按钮样式：

复选框

默认复选框

选中复选框

禁用复选框

单选按钮

默认单选按钮

选中单选按钮

禁用单选按钮

<!-- 复选框 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    默认复选框
  </label>
</div>

<!-- 单选按钮 -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    默认单选按钮
  </label>
</div>

文件上传

使用 .form-control 类设置文件上传控件样式：

默认文件上传

多文件上传

禁用文件上传

<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>

范围滑块

使用 .form-range 类设置范围滑块样式：

范围滑块示例

自定义范围滑块

最小值: 0, 最大值: 5, 步长: 0.5

禁用范围滑块

<div class="mb-3">
  <label for="customRange1" class="form-label">范围滑块示例</label>
  <input type="range" class="form-range" id="customRange1">
</div>
<div class="mb-3">
  <label for="customRange2" class="form-label">自定义范围滑块</label>
  <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange2">
</div>

表单布局

Bootstrap 5 提供了多种表单布局选项，包括网格布局、水平表单和内联表单。

网格布局

使用Bootstrap网格系统创建复杂的表单布局：

名字

姓氏

用户名

@

地址

城市

省份

邮编

同意条款和条件

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName" class="form-label">名字</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName" class="form-label">姓氏</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  <!-- 更多表单字段 -->
</form>

水平表单

使用网格系统创建水平排列的表单：

邮箱

密码

单选按钮

第一个单选按钮

第二个单选按钮

示例复选框

<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>
  <!-- 更多表单字段 -->
</form>

内联表单

使用 .row-cols-* 类创建内联表单：

@

记住我

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">用户名</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername">
    </div>
  </div>
  <div class="col-12">
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>选择...</option>
      <option value="1">一</option>
    </select>
  </div>
  <!-- 更多表单字段 -->
</form>

表单验证

Bootstrap 5 提供了强大的表单验证功能，包括样式反馈和验证消息。

浏览器默认验证

Bootstrap 5 支持浏览器的默认验证功能：

名字

看起来不错!

姓氏

看起来不错!

用户名

@

请选择一个用户名。

城市

请提供一个有效的城市。

省份

请选择一个有效的省份。

邮编

请提供一个有效的邮编。

同意条款和条件

您必须同意才能提交。

<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" 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" required>
    <div class="valid-feedback">
      看起来不错!
    </div>
  </div>
  <!-- 更多表单字段 -->
</form>

验证状态

Bootstrap 5 提供了多种验证状态类：

有效状态

看起来不错!

无效状态

请提供一个有效的值。

<!-- 有效状态 -->
<div class="mb-3">
  <label for="validationValid" class="form-label">有效状态</label>
  <input type="text" class="form-control is-valid" id="validationValid">
  <div class="valid-feedback">
    看起来不错!
  </div>
</div>

<!-- 无效状态 -->
<div class="mb-3">
  <label for="validationInvalid" class="form-label">无效状态</label>
  <input type="text" class="form-control is-invalid" id="validationInvalid">
  <div class="invalid-feedback">
    请提供一个有效的值。
  </div>
</div>

自定义表单

Bootstrap 5 允许您自定义表单的外观和行为。

输入组

使用 .input-group 类创建带有附加内容的输入框：

您的个人网址

https://example.com/users/

金额

￥ .00

用户名

@

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

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

<div class="input-group">
  <span class="input-group-text">￥</span>
  <input type="text" class="form-control">
  <button class="btn btn-outline-secondary" type="button">检查</button>
</div>

浮动标签

使用 .form-floating 类创建浮动标签效果：

邮箱地址

密码

选择选项

<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 mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
  <label for="floatingPassword">密码</label>
</div>

<div class="form-floating">
  <select class="form-select" id="floatingSelect">
    <option selected>选择...</option>
    <option value="1">一</option>
  </select>
  <label for="floatingSelect">选择选项</label>
</div>

自定义样式

通过CSS自定义表单的外观：

自定义输入框

自定义选择框

自定义复选框

.form-control-custom {
  border-color: #6f42c1;
}

.form-check-input:checked {
  background-color: #6f42c1;
  border-color: #6f42c1;
}

交互式表单演示

使用下面的控件实时调整表单属性，观察效果变化。

表单控件类型

表单状态

表单大小

示例标签

示例帮助文本

<div class="mb-3">
  <label for="interactiveInput" class="form-label">示例标签</label>
  <input type="text" class="form-control" id="interactiveInput" placeholder="示例输入框">
  <div class="form-text">示例帮助文本</div>
</div>

表单快速参考

表单控件类

输入框

.form-control
.form-control-lg
.form-control-sm

选择框

.form-select
.form-select-lg
.form-select-sm

复选框/单选

.form-check
.form-check-input
.form-check-label

文件上传

.form-control
type="file"

范围滑块

.form-range

浮动标签

.form-floating

表单布局类

网格布局

.row
.col-*
.g-*

水平表单

.col-form-label
.row
.col-*

内联表单

.row-cols-*
.g-*
.align-items-center

输入组

.input-group
.input-group-text

表单验证类

验证状态

.is-valid
.is-invalid

反馈消息

.valid-feedback
.invalid-feedback

表单设置

.needs-validation
novalidate
required

掌握表单后，探索更多Bootstrap组件

Bootstrap 5 提供了丰富的组件库，可以帮助您构建功能完善的现代网站。

学习按钮组件查看导航组件

Bootstrap5教程

Bootstrap5 弹出框

Bootstrap 5 表单

Bootstrap 5 表单介绍

表单组件优势

美观一致

快速开发

响应式

验证功能

基本表单结构

表单控件

文本输入

文本域

选择框

复选框和单选按钮

文件上传

范围滑块

表单布局

网格布局

水平表单

内联表单

表单验证

浏览器默认验证

验证状态

自定义表单

输入组

浮动标签

自定义样式

交互式表单演示

表单快速参考

表单控件类

输入框

选择框

复选框/单选

文件上传

范围滑块

浮动标签

表单布局类

网格布局

水平表单

内联表单

输入组

表单验证类

验证状态

反馈消息

表单设置

掌握表单后，探索更多Bootstrap组件