表单

表单控件 Form Controls

对原生表单控件进行统一样式美化：

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

<!-- 下拉选择 -->
<div class="mb-3">
    <label for="select" class="form-label">请选择</label>
    <select class="form-select" id="select">
        <option selected>打开此菜单</option>
        <option value="1">选项一</option>
        <option value="2">选项二</option>
    </select>
</div>

<!-- 文本域 -->
<div class="mb-3">
    <label for="textarea" class="form-label">留言内容</label>
    <textarea class="form-control" id="textarea" rows="3"></textarea>
</div>

表单布局

垂直表单（默认）

<form>
    <div class="mb-3">
        <label for="name" class="form-label">姓名</label>
        <input type="text" class="form-control" id="name">
    </div>
    <div class="mb-3">
        <label for="pwd" class="form-label">密码</label>
        <input type="password" class="form-control" id="pwd">
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

水平表单

<form>
    <div class="row mb-3">
        <label for="inputEmail" class="col-sm-2 col-form-label">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail">
        </div>
    </div>
    <div class="row mb-3">
        <label for="inputPwd" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPwd">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
</form>

复选框与单选框

<!-- 复选框 -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">同意条款</label>
</div>

<!-- 单选框 -->
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio" id="radio1">
    <label class="form-check-label" for="radio1">选项A</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio" id="radio2">
    <label class="form-check-label" for="radio2">选项B</label>
</div>

<!-- 开关样式 -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="switch">
    <label class="form-check-label" for="switch">开关按钮</label>
</div>

输入组 Input Group

在输入框前后附加文字、图标或按钮：

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

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

表单校验 Validation

Bootstrap 5 支持浏览器原生表单校验，通过 CSS 伪类展示校验状态：

<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validation" class="form-label">必填项</label>
        <input type="text" class="form-control" id="validation" required>
        <div class="valid-feedback">验证通过</div>
        <div class="invalid-feedback">此项为必填</div>
    </div>
    <button class="btn btn-primary" type="submit">提交</button>
</form>

结合 JavaScript 启用校验：

// 禁止表单提交并显示校验反馈
(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)
    })
})()