Bootstrap4组件:表单(Form)


发布时间:2020-03-18 21:05    作者: Uncle Hui   已过去:3 周,1 日   阅读总量:44 已被赞:0


表单(Form)

表单控件

1. 文本控件(如 <input><select> <textarea>)统一采用 .form-control 样式进行处理优化,包括常规外观、focus选(点)中状态、尺寸大小等。

2. 对于input上传文件选择控件,Bootstrap v4采用.form-control-file 取代了.form-control

3. 大小规格:使用 .form-control-lg  .form-control-sm属性定控件大小高度。

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

5. 只读属性:在input控件上增加 readonly (布尔值)标签定义,以防止修改input中的值。仅能阅读的input控件显示较谈(禁用的输入框),但保留鼠标效果。

6. 只读纯文本:如果你希望将 <input readonly>属性进一步处理,显示为纯文本(没有控件框),你只要引用 .form-control-plaintext class样式,就能移除预设的表单样式,并保留适当的边距和填充间隙。

7. 提示文本small.form-text.text-muted 就是在输入框下出现小字说明

<form action="">

<div class="form-group">

<label for="">邮箱</label>

<input type="text" class="form-control">

</div>

<div class="form-group">

<label for="">密码</label>

<input type="password" class="form-control">

</div>

<div class="form-check">

<input type="checkbox" class="form-check-input">

<label for="" class="form-check-label">记住我</label>

</div>

<button class="btn btn-primary">登录</button>

</form>

复选框与单选框

使用.form-check 可以格式化复选框和单选框按钮,用以改进它们的默认布局和动作呈现,复选框用于在列表中选择一个或多个选项,单选框则用于多许多选项中选择一个。

复选框和单选框也是可以禁用的,只要not-allowed在父级的悬停上提供定义,<label>需要将该.disabled 类添加到父级.form-check,同时控件也会淡化文字颜色以灰色显示禁用状态。

单选:

复选:

默认堆叠每个占一行

<div class="form-group">

<div class="form-check">

<input type="checkbox/radio" class="form-check-input">

<label class="form-check-label">苹果</label>

</div>

<div class="form-check">

<input type="checkbox/radio" class="form-check-input"> #radio单选,checkbox 多选

<label class="form-check-label">香蕉</label>

</div>

<div class="form-check">

<input type="checkbox/radio" class="form-check-input" disabled>

<label class="form-check-label">橘子</label>

</div>

</div>

水平排列

通过添加 .form-check-inline到任何一个组,会使 加到任何.form-check中的选取框平行排列。

没有标签

添加 .position-static  .form-check 选择器上,可以实现没有文本的输入

<div class="form-check">

<input type="checkbox/radio" class="form-check-input position-static">

</div>

布局

表单栅格排列

可使用我们的栅格系统构建更复杂的表单,包括建立多列、多种宽度和其它对齐选项的布局。

<form>

<div class="row">

<div class="col">

<input type="email" class="form-control" placeholder="邮箱">

</div>

<div class="col">

<input type="password" class="form-control" placeholder="密码">

</div>

</div>

</form>

你也可以使用 .form-row来取代.row(它们二者很多时候可以互换使用),因为.form-row提供更小的沟槽缝隙间距小一些

<form>

<div class="form-row">

<div class="form-group col-sm-8">

<label>邮箱</label>

<input type="email" class="form-control" placeholder="邮箱">

</div>

<div class="form-group col-sm-4">

<label>密码</label>

<input type="password" class="form-control" placeholder="密码">

</div>

</div>

</form>

mb-3内部拉开距离

垂直排列表单

通过添加 .row class类,并使用 .col-*-* 等栅格组件来指定标签和宽度,可以建立起水平表单。

确保添加.col-form-label 到您<label>上,以便他们垂直居中与他们相关的表单控件。<legend>元素,可以.col-form-legend样式定义,与普通<label>元素相似。.

<form>

<div class="form-group row">

<label class="col-sm-1 col-form-label">邮箱</label>

<div class="col-sm-11">

<input type="email" class="form-control" placeholder="邮箱">

</div>

</div>

<div class="form-group row">

<label class="col-sm-1 col-form-label">密码</label>

<div class="col-sm-11">

<input type="password" class="form-control" placeholder="密码">

</div>

</div>

<div class="row">

<div class="offset-sm-1 col-sm-11">

<button class="btn btn-primary">登录</button>

</div>

</div>

</form>

垂直排列表单尺寸规格定义

使用.col-form-label-sm.col-form-label-lg  <label>上,可以定义控件大小,还有 .form-control-lg.form-control-sm样式也起相应作用。

自动调整大小一行显示时候

下面的示例使用一个flexbox弹性布局垂直居中的内容,我们将.col改为.col-auto,这样的列只占用本身内容所需要的宽度,换句话说列的大小就是内容的大小(宽度)

<form>

<div class="form-row">

<div class="col-auto">

<input type="email" 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>

内联式表单单个水平行上显示

使用 .form-inline样式在单个水平行上显示一系列标签,表单控件和按钮。内联表单中的表单控件与默认状态略有不同:

  1. 基于display: flex控件组件,并允许您使用 间隙隔离 flexbox 弹性布局样式。
  2. 控制组件和input接受 width: auto 以覆盖预设的 width: 100%。
  3. 控制组件只会在viewport 576px宽度 时才会显示在行内,以便在移动设备上完整呈现。

<form class="form-inline">

<input type="email" class="form-control mb-2 mr-sm-2" placeholder="邮箱">

<input type="password" class="form-control mb-2 mr-sm-2" placeholder="密码">

<div class="form-check mb-2 mr-sm-2">

<input type="checkbox" class="form-check-input">

<label for="" class="form-check-label">记住我</label>

</div>

<button class="btn btn-primary">登录</button>

</form>

禁用表单

<form>

<fieldset disabled>

……表单input部分

</fieldset>

</form>

验证

自定义样式js判断按钮的输入否

对于自定义Bootstrap表单验证消息,您需要将 novalidate属性添加到您的<form>。这将禁用浏览器默认的反馈工具提示,但仍提供对JavaScript中的表单验证API有效支持。尝试提交以下表格; 我们的JavaScript将拦截提交按钮并向您传递反馈:

尝试提交时,您将看到:invalid :valid的样式应用于表单控件。

<form action="" novalidate class="needs-validation">

    <div class="form-group">

        <label for="">邮箱</label>

        <input type="text" class="form-control" placeholder="邮箱" required>

        <div class="invalid-feedback">邮箱格式不正确!</div>

    </div>

    <div class="form-group">

        <label for="">密码</label>

        <input type="password" class="form-control" placeholder="密码" required>

        <div class="invalid-feedback">密码格式不正确!</div>

    </div>

    <div class="form-check">

        <input type="checkbox" name="" id="" class="form-check-input">

        <label for="" class="form-check-label">记住我</label>

    </div>

    <button class="btn btn-primary">登录</button>

</form>

 

<script>

    // Example starter JavaScript for disabling form submissions if there are invalid fields

    (function() {

        'use strict';

        window.addEventListener('load', function() {

            // Fetch all the forms we want to apply custom Bootstrap validation styles to

            var forms = document.getElementsByClassName('needs-validation');

            // Loop over them and prevent submission

            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>

服务器端

我们建议使用客户端验证,但是如果您需要使用服务器端验证,则可以使用.is-invalid服务端判断错误时候.is-valid判断是正确时候来表示无效和有效的表单字段。注意,.invalid-feedback这些类也支持。

<form>

<div class="form-group">

<label>邮箱</label>

<input type="email" class="form-control is-valid" placeholder="邮箱">

<div class="valid-feedback">邮箱正确!</div>

<div class="invalid-feedback">邮箱不正确!</div>

</div>

<div class="form-group">

<label>密码</label>

<input type="password" class="form-control is-invalid" placeholder="密码">

<div class="valid-feedback">密码格式正确!</div>

<div class="invalid-feedback">密码格式不正确!</div>

</div>

<button class="btn btn-primary">登录</button>

</form>

自定义表单

为了使自定义表单和跨浏览器保持一致性,请使用自定义的表单元素来替换浏览器的默认值,它们建立在语义和具备友了的标记之上,因此它们是可以替代任何默认表单控制元件的。

Checkbox勾选

<div class="custom-control custom-checkbox">

<input type="checkbox" class="custom-control-input" id="remember">

<label class="custom-control-label" for="remember">记住我</label>

</div>

Radio单选项

<div class="custom-control custom-radio">

<input type="radio" name="sex" id="man" class="custom-control-input">

<label class="custom-control-label" for="man">男</label>

</div>

<div class="custom-control custom-radio">

<input type="radio" name="sex" id="woman" class="custom-control-input">

<label class="custom-control-label" for="woman">女</label>

</div>

要在一行显示:在.custom-control添加.custom-control-inline

IOS风格开关

开关具有自定义复选框的标记,使用 .custom-switch 类来呈现切换开关。开关还支持 disabled属性(v4.2.1新增组件)。

<div class="custom-control custom-switch">

    <input type="checkbox" class="custom-control-input" id="customSwitch1">

    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>

</div>

Select下拉选择菜单

自定义<select>下拉选择菜单只需要一个.custom-select CSS即可触发自定义样式。

<select class="custom-select">

<option>-请选择-</option>

<option>aaa</option>

<option>bbb</option>

<option>ccc</option>

</select>

大小和尺寸:可以在.custom-select上添加.custom-select-lg/sm改变大小。

Range范围

创建自定义<input type="range">与控制.custom-range。轨道(背景)和大拇指(值)都被设置为跨浏览器显示相同。由于只有IE和Firefox支持从拇指的左侧或右侧“填充”它们的轨迹,以作为视觉指示进度的手段,所以我们目前不支持它。

<input type="range" class="custom-range">

File文件浏览器

文件浏览(选取)是比较原始粗糙的,它需要额外的JavaScript定义支持,如果你将Choose file…文件选取和所选文件的名称关联。

<div class="custom-file">

<input type="file" class="custom-file-input" id="avatar">

<label class="custom-file-label" for="avatar">选择文件</label>

</div>

点赞

0




登陆后方可评论