bootstrap4-表单

表单

表单控件

1.文本控件

如 input、select、textarea 统一采用 .form-control 样式进行处理优化，包括外观、选中状态、大小等；

2.上传文件则用 .form-control-file 代替了 .form-control ；

3.大小规格

使用.form-control-lg 和 .form-control-sm 样式控制控件大小；

4.输入范围

使用 .form-control-range 设置水平滚动范围输入；

5.只读属性

readonly属性 防止控件的值被修改；

6.只读纯文本

把只读控件显示为纯文本，没有控件样式，使用 .form-control-plaintext 样式就可以移除控件样式，只保留文本；

7.提示文本

small.form-text.text-muted

复选框与单选框

使用 .form-check 可以格式化复选框与单选框，用以改进他们的默认布局和呈现。

默认是堆叠的，水平排列需要将 .form-check-inline 样式类添加到 .form-check 的标签中进行水平排列；

input 需要添加 form-check-input 样式类

label 需要添加 form-check-label样式类

<div class="form-group"> <div class="form-check " > <input type="checkbox" name="checkbox[]" id="pg" class="form-check-input"> <label for="pg" class="form-check-label">苹果</label> </div> <div class="form-check"> <input type="checkbox" name="checkbox[]" id="xj" class="form-check-input"> <label for="xj" class="form-check-label">香蕉</label> </div> <div class="form-check"> <input type="checkbox" name="checkbox[]" id="xg" class="form-check-input"> <label for="xg" class="form-check-label">西瓜</label> </div> </div> <div class="form-group"> <div class="form-check form-check-inline"> <input type="radio" name="radio" id="man" class="form-check-input"> <label for="man" class="form-check-label">男</label> </div> <div class="form-check form-check-inline"> <input type="radio" name="radio" id="woman" class="form-check-input"> <label for="woman" class="form-check-label">女</label> </div> <div class="form-check form-check-inline"> <input type="radio" name="radio" id="bm" class="form-check-input"> <label for="bm" class="form-check-label">保密</label> </div> </div>

没有标签的情况，添加 .position-static 到 .form-check 选择器上，实现没有文本的输入；

<div class="form-group"> <div class="form-check"> <input type="checkbox" name="checkedbox" id="" class="form-check-input position-static"> </div> <div class="form-check"> <input type="radio" name="radio" id="" class="form-check-input position-static"> </div> </div>

布局

使用bootstrap4 的栅格系统进行布局

<form action=""> <div class="row"> <div class="form-group col-md-6"> <label for="">邮箱</label> <input type="email" name="" id="" class="form-control"> </div> <div class="form-group col-md-6"> <label for="">密码</label> <input type="password" name="" id="" class="form-control"> </div> </div> </form>

可以将 .row 写成 .form-row .form-row 的间距更小

<form action=""> <div class="form-row"> <div class="form-group col-md-6"> <label for="">邮箱</label> <input type="email" name="" id="" class="form-control"> </div> <div class="form-group col-md-6"> <label for="">密码</label> <input type="password" name="" id="" class="form-control"> </div> </div> </form>

垂直排列表单

通过 .row 样式类 并使用栅格系统来排列

label 需要添加 col-form-label 样式类 确保垂直居中与其相关的控件

列举一个水平1:11 的布局

<form action=""> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">邮箱</label> <input type="email" name="" id="" class="form-control col-md-11"> </div> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">密码</label> <input type="password" name="" id="" class="form-control col-md-11"> </div> <div class="form-group row"> <div class="col-md-11"> <button class="btn btn-primary offset-1">登录</button> </div> </div> </form>

垂直排列尺寸定义

使用 .col-form-label-sm .col-form-label-lg 作用于 label标签 上，.form-control-lg .form-control-sm 作用于表单控件上；

自动调整大小

自动调整大小需要将col-* 改写成col-auto , 这样表单就只占位需要的空间；

<div class="form-row"> <div class="col-auto"> <input type="text" class="form-control" placeholder="邮箱"> </div> <div class="col-auto"> <input type="password" class="form-control" placeholder="密码"> </div> <div class="col-auto"> <button class="btn btn-primary">登录</button> </div> </div>

内联表单

使用 .form-inline 样式在单个水平上显示一系列标签

<form action="" class="form-inline"> <input type="text" class="form-control mb-2 mr-sm-2" placeholder="邮箱"> <input type="password" class="form-control mb-2 mr-sm-2" placeholder="密码"> <div class="from-check mb-2 mr-sm-2 form-check-inline"> <input type="checkbox" name="" id="" class="form-check-input"> <label for="" class="form-check-label">记住我</label> </div> <button class="btn btn-primary">登录</button> </form>

禁用表单

将需要禁用的表单内容放入 fieldset 标签中 并在fieldset 添加 disabled 属性

<form action=""> <fieldset disabled> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">邮箱</label> <input type="email" name="" id="" class="form-control col-md-11"> </div> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">密码</label> <input type="password" name="" id="" class="form-control col-md-11"> </div> <div class="form-group row"> <div class="col-md-11"> <button class="btn btn-primary offset-1">登录</button> </div> </div> </fieldset> </form>

表单验证

自定义样式

在表单控件中添加required 属性，在form标签中添加novalidate属性 取消预设的验证样式；

需要使用js来获取表单；

错误提示的文本需要添加 .invalid-feedback 样式类

<form action="" novalidate class="needs-validation"> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">邮箱</label> <input type="email" name="" id="" class="form-control col-md-11" required> <div class="invalid-feedback offset-1"> 您输入的邮箱格式不正确 </div> </div> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">密码</label> <input type="password" name="" id="" class="form-control col-md-11" required> <div class="invalid-feedback offset-1"> 您输入的密码不正确 </div> </div> <div class="form-group row"> <div class="col-md-11"> <button class="btn btn-primary offset-1">登录</button> </div> </div> </form> <script> (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to let forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission let 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>

服务器端样式

不需要js，在控件中 添加 .is-valid 样式类 表示正确输入，同时提示文本需要添加 .valid-feedback 样式；

控件中添加 .is-invalid 样式类 表示错误输入，同时提示文本休要添加 .invalid-feedback;

<form action=""> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">邮箱</label> <input type="email" name="" id="" class="form-control col-md-11 is-valid" > <div class="valid-feedback offset-1"> 您输入的邮箱正确 </div> </div> <div class="form-group row"> <label for="" class="col-md-1 col-form-label">密码</label> <input type="password" name="" id="" class="form-control col-md-11 is-invalid" > <div class="invalid-feedback offset-1"> 您输入的密码不正确 </div> </div> <div class="form-group row"> <div class="col-md-11"> <button class="btn btn-primary offset-1">登录</button> </div> </div> </form>