表单

前端今晚打老虎 2024-10-17 21:35 9

从入门到精通bootstrap

Bootstrap 表单使用指南

在网页开发中，表单是与用户交互的重要组件。Bootstrap 提供了丰富的表单元素和样式，可以帮助开发者快速构建美观、响应式的表单。本文将详细介绍 Bootstrap 中的表单，包括基本表单元素、表单组与布局，以及验证样式的使用。

1. 基本表单元素

Bootstrap 提供了多种基本表单元素，如输入框、按钮、复选框、单选框等，使用这些元素可以快速构建表单。

1.1 输入框

输入框是表单的基本组成部分，Bootstrap 支持多种输入类型。

<div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入邮箱">
</div>

输入框类型

Bootstrap 支持以下几种常见的输入框类型：

text：文本输入框
email：电子邮件输入框
password：密码输入框
number：数字输入框
url：网址输入框
tel：电话号码输入框

1.2 按钮

按钮是表单中常用的元素，用于提交表单。

<button type="submit" class="btn btn-primary">提交</button>

按钮样式

Bootstrap 提供了多种按钮样式，可以通过 btn 和其他类进行组合使用：

.btn-primary：主要按钮
.btn-secondary：次要按钮
.btn-success：成功提示按钮
.btn-danger：危险按钮
.btn-warning：警告按钮
.btn-info：信息按钮
.btn-light：浅色按钮
.btn-dark：深色按钮

1.3 复选框与单选框

复选框和单选框允许用户从给定的选项中进行选择。

复选框

<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
            复选框选项1
        </label>
    </div>
</div>

单选框

<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
        <label class="form-check-label" for="exampleRadios1">
            单选框选项1
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
        <label class="form-check-label" for="exampleRadios2">
            单选框选项2
        </label>
    </div>
</div>

1.4 下拉菜单

下拉菜单允许用户选择一个选项。

<div class="form-group">
    <label for="exampleSelect">选择一个选项</label>
    <select class="form-control" id="exampleSelect">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
</div>

2. 表单组与布局

为了使表单更加美观和一致，Bootstrap 提供了表单组（.form-group）和布局的支持。

2.1 表单组

表单组将相关的输入框组合在一起，使其在视觉上更加紧凑。

<div class="form-group">
    <label for="exampleInputName">姓名</label>
    <input type="text" class="form-control" id="exampleInputName" placeholder="输入姓名">
</div>
<div class="form-group">
    <label for="exampleInputPassword">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="输入密码">
</div>

2.2 垂直与水平布局

Bootstrap 支持垂直和水平布局。通过添加类 row 和 col，可以轻松实现响应式布局。

垂直布局

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱地址</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="输入邮箱">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword" placeholder="输入密码">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

水平布局

<form>
    <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">邮箱地址</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="输入邮箱">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="输入密码">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

2.3 表单内嵌输入

Bootstrap 允许你在表单组中嵌入多个输入元素，使得用户体验更加流畅。

<div class="form-group">
    <label for="exampleInputAmount">金额</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">$</span>
        </div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="输入金额">
        <div class="input-group-append">
            <span class="input-group-text">.00</span>
        </div>
    </div>
</div>

3. 验证样式

表单验证是确保用户输入正确的重要环节。Bootstrap 提供了内置的样式来支持表单验证。

3.1 基本验证

你可以通过添加特定的类来启用表单的验证样式。

<form class="needs-validation" novalidate>
    <div class="form-group">
        <label for="validationCustom01">姓名</label>
        <input type="text" class="form-control" id="validationCustom01" placeholder="输入姓名" required>
        <div class="invalid-feedback">
            姓名是必填的。
        </div>
    </div>
    <div class="form-group">
        <label for="validationCustom02">邮箱</label>
        <input type="email" class="form-control" id="validationCustom02" placeholder="输入邮箱" required>
        <div class="invalid-feedback">
            邮箱是必填的。
        </div>
    </div>
    <button class="btn btn-primary" type="submit">提交</button>
</form>

3.2 自定义验证

通过 JavaScript，你可以实现自定义的验证逻辑。例如：

<script>
    (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)
            })
    })()
</script>

4. 完整示例

下面是一个完整的表单示例，展示了如何结合使用 Bootstrap 的表单元素、布局和验证样式：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrap 表单示例</title>
</head>
<body>

<div class="container mt-5">
    <h2>用户注册表单</h2>
    <form class="needs-validation" novalidate>
        <div class="form-group">
            <label for="validationCustom01">姓名</label>
            <input type="text" class="form-control" id="validationCustom01" placeholder="输入姓名" required>
            <div class="invalid

-feedback">
                姓名是必填的。
            </div>
        </div>
        <div class="form-group">
            <label for="validationCustom02">邮箱</label>
            <input type="email" class="form-control" id="validationCustom02" placeholder="输入邮箱" required>
            <div class="invalid-feedback">
                邮箱是必填的。
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="输入密码" required>
            <div class="invalid-feedback">
                密码是必填的。
            </div>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="gridCheck" required>
                <label class="form-check-label" for="gridCheck">
                    我同意条款和条件
                </label>
                <div class="invalid-feedback">
                    必须同意条款和条件。
                </div>
            </div>
        </div>
        <button class="btn btn-primary" type="submit">提交</button>
    </form>
</div>

<script>
    (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)
            })
    })()
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

结论

通过本文的介绍，我们深入探讨了 Bootstrap 中表单的基本元素、布局和验证样式的使用方法。Bootstrap 提供了强大而灵活的工具，能够帮助我们快速构建美观且功能强大的表单。在实际开发中，掌握这些组件的使用技巧，可以大大提高开发效率和用户体验。希望本文能够帮助你更好地理解和使用 Bootstrap 表单组件。

个人信息

今晚打老虎

积分: 4

“这家伙很懒，什么个性签名都没有留下。”

私信专栏