【BootStrap入门级教程】表单

原创已于 2023-10-12 10:02:33 修改 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #前端 #html

于 2023-10-12 09:59:34 首次发布

BootStrap 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HTML中的各种表单控件，如文本域、单选/复选按钮、下拉选项、多行文本域等，还包括响应式栅格表单、表单组设计以及表单验证方法，包括提交前后验证及其所需JavaScript代码示例。

在这里插入图片描述

文章目录

前言
1、表单控件
2、栅格表单
3、表单组
4、浮动标签
5、表单验证

前言

本章节学习表单相关类，从基础控件到响应式栅格表单、表单组以及最后的表单验证，能够帮助我们快速构建表单、渲染样式、及时验证等

1、表单控件

1.1 文本域常用类

.form-control

1.2 单选按钮

.form-check .form-check-input

1.3 复选按钮

.form-check .form-check-input .form-check-inline

1.4 下拉

.form-select .form-select-sm .form-select-lg

1.5 多行文本域

.form-control

1.6 文件域

.form-control

1.7 颜色

.form-control .form-control-color

1.8 范围

.form-range

<div class="w-50 mx-auto ">
        <!-- 文本域 -->
        <label for="no" class="form-label">账号:</label>
        <input type="text" id="no" class="form-control">
        <label for="pwd" class="form-label">密码：</label>
        <input type="password" id="pwd" class="form-control">
        <!-- 单选按钮 -->
        <label for="" class="form-label">性别:</label>
        <div class="form-check">
            <input type="radio" name="sex" class="form-check-input">男
        </div>
        <div class="form-check">
            <input type="radio" name="sex" class="form-check-input">女
        </div>
        <!-- 复选框 -->
        <label class="form-label">爱好:</label>
        <div class="form-check">
            <input type="checkbox" class="form-check-input form-check-inline">篮球
            <input type="checkbox">游戏
            <input type="checkbox">学习
        </div>
        <!-- 下拉框 -->
        <label for="">班级:</label>
        <select class="form-select form-select-sm">
            <option value="1">移动1班</option>
            <option value="2">移动2班</option>
        </select>
        <!-- 多行文本域 -->
        <label for="">描述</label>
        <textarea cols="30" rows="3" class="form-control"></textarea>
        <!-- 文件域 -->
        <label for="">选择头像:</label>
        <input type="file" class="form-control">
        <!-- 颜色 -->
        <label for="">主题色:</label>
        <input type="color" class="form-control form-control-color">
        <!-- 范围 -->
        <label for="">随便:</label>
        <input type="range" class="form-range">
        <button class="btn btn-danger form-control">注册</button>
    </div>

2、栅格表单

.row .col-断点尺寸-大小

标签垂直居中 .col-form-label

<form class="w-50 mx-auto">
        <div class="row">
            <div class="col-12">
                <label class="form-label col-form-label">账号:</label>
            </div>
            <div class="col-9">
                <input type="text" class="form-control">
            </div>
        </div>
    </form>

3、表单组

.input-group .input-group-text

<form class="w-50 mx-auto">
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-text">@qq.com</span>
        </div>
        <div class="input-group">
            <input type="text" class="form-control">
            <button class="btn btn-info">百度一下</button>
        </div>
    </form>

4、浮动标签

类.form-floating

属性placeholder必须的，值可以没有，但是这个属性必须有

<form class="w-50 mx-auto">
        <div class="form-floating">
            <!-- 实现标签浮动,label和表单元素位置必须先写input
				再写label,不能反
                另外placeholder必须有,可以不给值,但是不能没有
            -->
            <input type="text" class="form-control" placeholder="">
            <label for="">账号:</label>
        </div>
    </form>

5、表单验证

表单验证有两种情况：表单提交前验证、表单提交后验证

验证1：表单提交后验证，需要提供js代码

. needs-validation 将在表单提交之后验证缺少的内容

. invalid-feedback 验证不通过显示

.valid-feedback 验证通过显示

novalidate（必须）

需要以下js代码：

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

示例：

<!-- 验证1：提交后验证，需要一段js代码 -->
    <form action="" class="needs-validation" novalidate>
        <div class="mb-3">
            <label class="form-label">用户名：</label>
            <input type="text" class="form-control" required="required" />
            <div class="valid-feedback">验证成功！</div>
            <div class="invalid-feedback">
                此项必须填写！！！
            </div>
        </div>
        <div class="mb-3">
            <input type="submit" class="btn btn-success" value="提交">
        </div>
    </form>
    
    <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>

验证2：提交前验证，不需要js代码

<form action="" class="was-validated">
        <div class="mb-3">
            <label class="form-label">用户名：</label>
            <input type="text" class="form-control" required="required" />
            <div class="valid-feedback">验证成功！</div>
            <div class="invalid-feedback">
                此项必须填写！！！
            </div>
        </div>
        <div class="mb-3">
            <input type="submit" class="btn btn-success" value="提交">
        </div>
    </form>