垦荒学园 - 以垦荒之心，赴成长之约

切换主题

Bootstrap 表单 ​

概述 ​

Bootstrap 提供了丰富的表单控件和样式，帮助你创建美观、一致且易于使用的表单。表单是用户与网站交互的重要方式。

基本表单 ​

表单控件 ​

Bootstrap 为所有原生表单控件提供了样式：

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

表单控件 ​

输入框 ​

html
<div class="mb-3">
    <label for="basicInput" class="form-label">基本输入框</label>
    <input type="text" class="form-control" id="basicInput" placeholder="请输入文本">
</div>

<div class="mb-3">
    <label for="emailInput" class="form-label">邮箱输入框</label>
    <input type="email" class="form-control" id="emailInput" placeholder="name@example.com">
</div>

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

文本域 ​

html
<div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">文本域</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入多行文本"></textarea>
</div>

选择框 ​

html
<div class="mb-3">
    <label for="exampleFormControlSelect1" class="form-label">单选下拉框</label>
    <select class="form-select" id="exampleFormControlSelect1">
        <option selected>选择一个选项</option>
        <option value="1">选项 1</option>
        <option value="2">选项 2</option>
        <option value="3">选项 3</option>
    </select>
</div>

<div class="mb-3">
    <label for="exampleFormControlSelect2" class="form-label">多选下拉框</label>
    <select class="form-select" id="exampleFormControlSelect2" multiple>
        <option>选项 1</option>
        <option>选项 2</option>
        <option>选项 3</option>
        <option>选项 4</option>
        <option>选项 5</option>
    </select>
</div>

表单控件大小 ​

大小变体 ​

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 mb-3">
    <option>大选择框</option>
</select>

<select class="form-select mb-3">
    <option>默认选择框</option>
</select>

<select class="form-select form-select-sm">
    <option>小选择框</option>
</select>

表单布局 ​

垂直表单（默认） ​

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>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

水平表单 ​

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

内联表单 ​

html
<form class="row g-3">
    <div class="col-auto">
        <label for="staticEmail2" class="visually-hidden">邮箱</label>
        <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
    </div>
    <div class="col-auto">
        <label for="inputPassword2" class="visually-hidden">密码</label>
        <input type="password" class="form-control" id="inputPassword2" placeholder="密码">
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-3">确认身份</button>
    </div>
</form>

表单验证 ​

客户端验证 ​

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>
    
    <div class="mb-3">
        <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>
    
    <button class="btn btn-primary" type="submit">提交表单</button>
</form>

服务器端验证样式 ​

html
<form>
    <div class="mb-3">
        <label for="validationServer01" class="form-label">姓名</label>
        <input type="text" class="form-control is-valid" id="validationServer01" value="张三" required>
        <div class="valid-feedback">
            看起来不错！
        </div>
    </div>
    
    <div class="mb-3">
        <label for="validationServer02" class="form-label">邮箱</label>
        <input type="email" class="form-control is-invalid" id="validationServer02" value="test@" required>
        <div class="invalid-feedback">
            请提供有效的邮箱地址。
        </div>
    </div>
    
    <button class="btn btn-primary" type="submit">提交表单</button>
</form>

实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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">
        <h1>Bootstrap 表单示例</h1>
        
        <!-- 用户注册表单 -->
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">用户注册</h3>
                    </div>
                    <div class="card-body">
                        <form class="needs-validation" novalidate>
                            <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 class="invalid-feedback">
                                        请输入姓氏。
                                    </div>
                                </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 class="invalid-feedback">
                                        请输入名字。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址</label>
                                <input type="email" class="form-control" id="email" required>
                                <div class="invalid-feedback">
                                    请输入有效的邮箱地址。
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="password" required>
                                <div class="form-text">密码至少包含 8 个字符。</div>
                                <div class="invalid-feedback">
                                    请输入密码。
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="confirmPassword" class="form-label">确认密码</label>
                                <input type="password" class="form-control" id="confirmPassword" required>
                                <div class="invalid-feedback">
                                    请确认密码。
                                </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="birthDate" class="form-label">出生日期</label>
                                <input type="date" class="form-control" id="birthDate">
                            </div>
                            
                            <div class="mb-3">
                                <label for="gender" class="form-label">性别</label>
                                <select class="form-select" id="gender">
                                    <option value="">请选择</option>
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                    <option value="other">其他</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="bio" class="form-label">个人简介</label>
                                <textarea class="form-control" id="bio" rows="3" placeholder="简单介绍一下自己..."></textarea>
                            </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>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="terms" required>
                                    <label class="form-check-label" for="terms">
                                        我同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a>
                                    </label>
                                    <div class="invalid-feedback">
                                        你必须同意才能继续。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button class="btn btn-primary" type="submit">注册账户</button>
                                <button class="btn btn-outline-secondary" type="reset">重置表单</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 联系表单 -->
        <div class="row mt-5">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">联系我们</h3>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="mb-3">
                                <label for="contactName" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="contactName" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="contactEmail" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="contactEmail" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="subject" class="form-label">主题</label>
                                <select class="form-select" id="subject" required>
                                    <option value="">请选择主题</option>
                                    <option value="general">一般咨询</option>
                                    <option value="support">技术支持</option>
                                    <option value="sales">销售咨询</option>
                                    <option value="feedback">意见反馈</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="priority" class="form-label">优先级</label>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="priority" id="lowPriority" value="low">
                                        <label class="form-check-label" for="lowPriority">低</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="priority" id="mediumPriority" value="medium" checked>
                                        <label class="form-check-label" for="mediumPriority">中</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="priority" id="highPriority" value="high">
                                        <label class="form-check-label" for="highPriority">高</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="message" class="form-label">消息内容</label>
                                <textarea class="form-control" id="message" rows="5" placeholder="请详细描述你的问题或需求..." required></textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="attachment" class="form-label">附件</label>
                                <input class="form-control" type="file" id="attachment" multiple>
                                <div class="form-text">支持多个文件，每个文件不超过 10MB。</div>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">发送消息</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 搜索表单 -->
        <div class="row mt-5">
            <div class="col-md-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title mb-0">高级搜索</h3>
                    </div>
                    <div class="card-body">
                        <form class="row g-3">
                            <div class="col-md-6">
                                <label for="searchKeyword" class="form-label">关键词</label>
                                <input type="text" class="form-control" id="searchKeyword" placeholder="输入搜索关键词">
                            </div>
                            
                            <div class="col-md-6">
                                <label for="searchCategory" class="form-label">分类</label>
                                <select class="form-select" id="searchCategory">
                                    <option value="">所有分类</option>
                                    <option value="electronics">电子产品</option>
                                    <option value="clothing">服装</option>
                                    <option value="books">图书</option>
                                    <option value="home">家居</option>
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="priceMin" class="form-label">最低价格</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="priceMin" placeholder="0">
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <label for="priceMax" class="form-label">最高价格</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="priceMax" placeholder="1000">
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="inStock">
                                    <label class="form-check-label" for="inStock">
                                        仅显示有库存商品
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                    <button type="reset" class="btn btn-outline-secondary">重置</button>
                                </div>
                            </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>
    <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>
</body>
</html>

表单最佳实践 ​

  1. 使用语义化标签：正确使用 <label>、<fieldset> 等标签
  2. 提供清晰的标签：每个表单控件都应该有描述性的标签
  3. 合理的验证：提供即时反馈和清晰的错误消息
  4. 可访问性：使用 aria-* 属性和适当的 role
  5. 响应式设计：确保表单在所有设备上都能正常使用

下一步 ​

现在你已经掌握了 Bootstrap 表单的基本使用方法，接下来我们将学习复选框与单选框的详细用法。

下一章：Bootstrap 复选框与单选框 →

本站内容仅供学习和研究使用。

Copyright 2025 垦荒教程 kenhuang.com All Rights Reserved. 备案号：粤ICP备17084064号-3 | 免责声明