Bootstrap4 表单 - 创建响应式美观的Web表单

最后编辑于2025-04-14 12:35:42.1017169 +0800 CST

Bootstrap4 表单

表单是Web应用中用户输入数据的主要方式。Bootstrap4提供了丰富的表单组件和样式，帮助开发者快速创建美观、功能强大且响应式的表单。

表单基础

Bootstrap4中的表单元素会自动接收全局样式。使用.form-control类可以为文本输入框、选择框和文本域添加样式：

html 
 1<form>
 2  <div class="form-group">
 3    <label for="email">邮箱地址：</label>
 4    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
 5  </div>
 6  <div class="form-group">
 7    <label for="pwd">密码：</label>
 8    <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
 9  </div>
10  <div class="form-check">
11    <input type="checkbox" class="form-check-input" id="remember">
12    <label class="form-check-label" for="remember">记住我</label>
13  </div>
14  <button type="submit" class="btn btn-primary">提交</button>
15</form>

表单布局类型

Bootstrap4提供了三种表单布局：堆叠式（默认）、水平表单和内联表单。

堆叠式表单

堆叠式是默认的表单布局，每个表单组件占据一行。这是移动设备上最友好的布局：

html 
 1<form>
 2  <div class="form-group">
 3    <label for="name">姓名</label>
 4    <input type="text" class="form-control" id="name">
 5  </div>
 6  <div class="form-group">
 7    <label for="email">邮箱</label>
 8    <input type="email" class="form-control" id="email">
 9  </div>
10  <button type="submit" class="btn btn-primary">提交</button>
11</form>

内联表单

内联表单将多个表单控件排在同一行，适合简短的表单。使用.form-inline类创建：

html 
 1<form class="form-inline">
 2  <div class="form-group mr-2">
 3    <label for="email" class="mr-2">邮箱</label>
 4    <input type="email" class="form-control" id="email">
 5  </div>
 6  <div class="form-group mr-2">
 7    <label for="pwd" class="mr-2">密码</label>
 8    <input type="password" class="form-control" id="pwd">
 9  </div>
10  <button type="submit" class="btn btn-primary">登录</button>
11</form>

水平表单

水平表单使用网格系统排列标签和控件，通常标签在左侧，控件在右侧：

html 
 1<form>
 2  <div class="form-group row">
 3    <label for="email" class="col-sm-2 col-form-label">邮箱</label>
 4    <div class="col-sm-10">
 5      <input type="email" class="form-control" id="email">
 6    </div>
 7  </div>
 8  <div class="form-group row">
 9    <label for="pwd" class="col-sm-2 col-form-label">密码</label>
10    <div class="col-sm-10">
11      <input type="password" class="form-control" id="pwd">
12    </div>
13  </div>
14  <div class="form-group row">
15    <div class="col-sm-10 offset-sm-2">
16      <button type="submit" class="btn btn-primary">登录</button>
17    </div>
18  </div>
19</form>

表单控件大小

可以使用.form-control-lg和.form-control-sm类调整表单控件的大小：

html 
1<input type="text" class="form-control form-control-lg" placeholder="大尺寸输入框">
2<input type="text" class="form-control" placeholder="默认尺寸输入框">
3<input type="text" class="form-control form-control-sm" placeholder="小尺寸输入框">

表单验证

Bootstrap4提供了用于表单验证的样式：

html 
 1<form class="needs-validation" novalidate>
 2  <div class="form-group">
 3    <label for="uname">用户名：</label>
 4    <input type="text" class="form-control" id="uname" placeholder="输入用户名" required>
 5    <div class="valid-feedback">有效!</div>
 6    <div class="invalid-feedback">请填写此字段。</div>
 7  </div>
 8  <div class="form-group">
 9    <label for="pwd">密码：</label>
10    <input type="password" class="form-control" id="pwd" placeholder="输入密码" required>
11    <div class="valid-feedback">有效!</div>
12    <div class="invalid-feedback">请填写此字段。</div>
13  </div>
14  <button type="submit" class="btn btn-primary">提交</button>
15</form>
16
17<script>
18// 前端表单验证脚本
19(function() {
20  'use strict';
21  window.addEventListener('load', function() {
22    var forms = document.getElementsByClassName('needs-validation');
23    var validation = Array.prototype.filter.call(forms, function(form) {
24      form.addEventListener('submit', function(event) {
25        if (form.checkValidity() === false) {
26          event.preventDefault();
27          event.stopPropagation();
28        }
29        form.classList.add('was-validated');
30      }, false);
31    });
32  }, false);
33})();
34</script>

其他表单元素

复选框

html 
1<div class="form-check">
2  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something">
3  <label class="form-check-label" for="check1">选项 1</label>
4</div>

复选框组（内联）

html 
1<div class="form-check form-check-inline">
2  <input class="form-check-input" type="checkbox" id="inlineCheck1" value="option1">
3  <label class="form-check-label" for="inlineCheck1">选项 1</label>
4</div>
5<div class="form-check form-check-inline">
6  <input class="form-check-input" type="checkbox" id="inlineCheck2" value="option2">
7  <label class="form-check-label" for="inlineCheck2">选项 2</label>
8</div>

单选按钮

html 
1<div class="form-check">
2  <input class="form-check-input" type="radio" name="gender" id="male" value="male" checked>
3  <label class="form-check-label" for="male">男</label>
4</div>
5<div class="form-check">
6  <input class="form-check-input" type="radio" name="gender" id="female" value="female">
7  <label class="form-check-label" for="female">女</label>
8</div>

下拉选择框

html 
1<div class="form-group">
2  <label for="sel1">选择列表：</label>
3  <select class="form-control" id="sel1">
4    <option>1</option>
5    <option>2</option>
6    <option>3</option>
7    <option>4</option>
8  </select>
9</div>

表单设计最佳实践

  1. 使用适当的HTML5输入类型：使用type="email"、type="number"等提供合适的移动键盘
  2. 添加描述性标签：每个表单控件都应有标签，不要用占位符代替标签
  3. 提供即时反馈：用户输入后立即提供验证反馈
  4. 保持布局一致：对齐标签和控件，保持一致的间距
  5. 分组相关字段：使用fieldset组织相关的表单字段
  6. 使用图标增强交互：在适当的位置添加图标以提高可用性

响应式表单设计

确保您的表单在各种设备上表现良好：

  1. 在移动设备上使用堆叠布局
  2. 控件大小要合适，确保触摸操作友好（至少44×44像素）
  3. 使用Bootstrap网格系统创建灵活的表单布局
  4. 测试不同屏幕尺寸下的表单表现

表单是网站与用户交互的关键部分，良好的表单设计能显著提高转化率和用户体验。使用Bootstrap4的表单组件和样式能帮助您快速构建专业、响应式的表单界面。