Bootstrap表单：快速构建现代化表单的利器

吃西红柿长大的番茄
65 阅读3分钟

表单作为网页中不可或缺的交互元素，承担着数据收集、用户反馈、登录注册等重要功能。然而，传统表单开发往往面临样式不统一、兼容性差、响应式布局复杂等问题。Bootstrap表单组件正是为解决这些痛点而生，让开发者能够快速构建美观、一致且具备响应式能力的表单界面。

Bootstrap表单

Bootstrap表单是一套预定义样式类和组件的集合，基于Bootstrap框架的表单控件增强系统。它通过简单的HTML结构和CSS类名，即可实现专业级的表单设计，无需编写复杂的自定义样式。

基本表单结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap表单示例</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <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>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

表单布局方式

垂直表单（默认）

<form>
    <div class="mb-3">
        <label for="verticalEmail" class="form-label">邮箱</label>
        <input type="email" class="form-control" id="verticalEmail">
    </div>
    <div class="mb-3">
        <label for="verticalPassword" class="form-label">密码</label>
        <input type="password" class="form-control" id="verticalPassword">
    </div>
</form>

水平表单

<form>
    <div class="row mb-3">
        <label for="horizontalEmail" class="col-sm-2 col-form-label">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="horizontalEmail">
        </div>
    </div>
    <div class="row mb-3">
        <label for="horizontalPassword" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="horizontalPassword">
        </div>
    </div>
</form>

行内表单

<form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineUsername">用户名</label>
        <input type="text" class="form-control" id="inlineUsername" placeholder="用户名">
    </div>
    <div class="col-12">
        <label class="visually-hidden" for="inlinePassword">密码</label>
        <input type="password" class="form-control" id="inlinePassword" placeholder="密码">
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">登录</button>
    </div>
</form>

表单示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整Bootstrap表单示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h3 class="card-title mb-0">用户注册</h3>
                    </div>
                    <div class="card-body p-4">
                        <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" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="lastName" class="form-label">姓氏</label>
                                    <input type="text" class="form-control" id="lastName" required>
                                </div>
                            </div>

                            <!-- 邮箱和电话 -->
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址</label>
                                <input type="email" class="form-control" id="email" required>
                                <div class="form-text">示例：example@domain.com</div>
                            </div>

                            <div class="mb-3">
                                <label for="phone" class="form-label">手机号码</label>
                                <input type="tel" class="form-control" id="phone">
                            </div>

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

                            <div class="mb-3">
                                <label for="confirmPassword" class="form-label">确认密码</label>
                                <input type="password" class="form-control" id="confirmPassword" required>
                            </div>

                            <!-- 选择框 -->
                            <div class="mb-3">
                                <label for="country" class="form-label">国家</label>
                                <select class="form-select" id="country">
                                    <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>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="male" value="male">
                                        <label class="form-check-label" for="male">男</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="female" value="female">
                                        <label class="form-check-label" for="female">女</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" id="other" value="other">
                                        <label class="form-check-label" for="other">其他</label>
                                    </div>
                                </div>
                            </div>

                            <!-- 复选框 -->
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="newsletter">
                                    <label class="form-check-label" for="newsletter">
                                        订阅新闻通讯
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="agree" required>
                                    <label class="form-check-label" for="agree">
                                        同意服务条款和隐私政策
                                    </label>
                                </div>
                            </div>

                            <!-- 文本域 -->
                            <div class="mb-3">
                                <label for="bio" class="form-label">个人简介</label>
                                <textarea class="form-control" id="bio" rows="3"></textarea>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">注册</button>
                                <button type="reset" class="btn btn-outline-secondary">重置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

表单控件详解

输入框类型

Bootstrap支持所有标准HTML5输入类型：

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

<div class="mb-3">
    <label for="numberInput" class="form-label">数字输入</label>
    <input type="number" class="form-control" id="numberInput">
</div>

<div class="mb-3">
    <label for="dateInput" class="form-label">日期选择</label>
    <input type="date" class="form-control" id="dateInput">
</div>

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

<div class="mb-3">
    <label for="rangeInput" class="form-label">范围滑块</label>
    <input type="range" class="form-range" id="rangeInput">
</div>

选择框和下拉菜单

<!-- 单选下拉菜单 -->
<div class="mb-3">
    <label for="singleSelect" class="form-label">单选下拉菜单</label>
    <select class="form-select" id="singleSelect">
        <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" multiple id="multipleSelect">
        <option selected>选项一</option>
        <option>选项二</option>
        <option>选项三</option>
        <option>选项四</option>
    </select>
</div>

<!-- 带大小属性的选择框 -->
<div class="mb-3">
    <label for="largeSelect" class="form-label">大尺寸选择框</label>
    <select class="form-select form-select-lg" id="largeSelect">
        <option selected>大尺寸选项</option>
        <option value="1">选项一</option>
    </select>
</div>

<div class="mb-3">
    <label for="smallSelect" class="form-label">小尺寸选择框</label>
    <select class="form-select form-select-sm" id="smallSelect">
        <option selected>小尺寸选项</option>
        <option value="1">选项一</option>
    </select>
</div>

复选框和单选按钮

<!-- 复选框 -->
<div class="mb-3">
    <label class="form-label">兴趣爱好</label>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="reading">
        <label class="form-check-label" for="reading">阅读</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="sports">
        <label class="form-check-label" for="sports">运动</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="music">
        <label class="form-check-label" for="music">音乐</label>
    </div>
</div>

<!-- 单选按钮 -->
<div class="mb-3">
    <label class="form-label">支付方式</label>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment" id="alipay">
        <label class="form-check-label" for="alipay">支付宝</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment" id="wechat">
        <label class="form-check-label" for="wechat">微信支付</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="payment" id="bank">
        <label class="form-check-label" for="bank">银行卡</label>
    </div>
</div>

<!-- 切换开关 -->
<div class="mb-3">
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">默认切换开关</label>
    </div>
</div>

输入组

<div class="mb-3">
    <label for="basic-url" class="form-label">个人网站</label>
    <div class="input-group">
        <span class="input-group-text">https://</span>
        <input type="text" class="form-control" id="basic-url">
    </div>
</div>

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

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

<div class="mb-3">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="搜索...">
        <button class="btn btn-outline-secondary" type="button">搜索</button>
    </div>
</div>

表单验证

<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validationCustom01" class="form-label">名字</label>
        <input type="text" class="form-control" id="validationCustom01" value="张三" required>
        <div class="valid-feedback">
            看起来不错!
        </div>
    </div>
    
    <div class="mb-3">
        <label for="validationCustom02" class="form-label">姓氏</label>
        <input type="text" class="form-control" id="validationCustom02" value="李" required>
        <div class="valid-feedback">
            看起来不错!
        </div>
    </div>
    
    <div class="mb-3">
        <label for="validationCustomUsername" class="form-label">用户名</label>
        <div class="input-group has-validation">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" id="validationCustomUsername" required>
            <div class="invalid-feedback">
                请选择一个用户名。
            </div>
        </div>
    </div>
    
    <div class="mb-3">
        <label for="validationCustom03" class="form-label">城市</label>
        <input type="text" class="form-control" id="validationCustom03" required>
        <div class="invalid-feedback">
            请提供一个有效的城市。
        </div>
    </div>
    
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                同意条款和条件
            </label>
            <div class="invalid-feedback">
                提交前必须同意条款。
            </div>
        </div>
    </div>
    
    <button class="btn btn-primary" type="submit">提交表单</button>
</form>

<script>
// 表单验证脚本
(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>

总结：

📝 基础语法要点

  • 基本结构：<form> + form-control类 + 标签和输入框

  • 三种布局：

    • 垂直表单：默认布局，移动端友好
    • 水平表单：使用栅格系统，桌面端友好
    • 行内表单：适合搜索、登录等简单场景

🛠️ 关键组件掌握

  • 输入框：<input class="form-control">
  • 选择框：<select class="form-select">
  • 复选框/单选：form-check系列类
  • 输入组：input-group增强输入框功能
  • 表单验证：needs-validation + 反馈消息类
avatar
文章
阅读
粉丝