正心全栈编程-文档站

Appearance

表单元素 ​

表单元素是输入框、选择框、复选框、开关、单选框等表单项组件，用于对表单域进行输入。layui 的表单元素对原生的表单元素进行了大幅的用着，有好看的 UI 同时又有非常方便操作的 API。

输入框 ​

https://layui.dev/docs/2.8/form/input.html

输入框组件是对文本框 <input type="text"> 和多行文本框 <textarea> 元素的扩展

普通输入框 ​

html

<body>
<div class="layui-form">
    <input type="text" name="" placeholder="文本框" class="layui-input">
    <hr class="ws-space-16">
    <textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
</div>
</body>

运行、访问之后就可以看到页面上显示了一个文本框一个多行文本框。

输入框点缀 ​

输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀。可以用图标进行修饰

html

<div class="layui-input-group">
    <div class="layui-input-prefix">前置内容</div>
    <input type="text" class="layui-input">
    <div class="layui-input-suffix">后缀内容</div>
</div>

提示

前置内容、后置内容 可以用图标代替

密码显隐

html
<input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">

内容清除

html
<input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">

选择框 ​

https://layui.dev/docs/2.8/form/select.html

选择框组件是对 <select> 元素的美化替代，延续了原有的特性，且加入了搜索等扩展。

普通选择框 ​

html

<body>
<div class="layui-form">
    <div class="layui-col-md6">
        <select>
            <option value="">请选择</option>
            <option value="AAA">选项 A</option>
            <option value="BBB" disabled>选项 B（禁用选项）</option>
            <option value="CCC">选项 C</option>
        </select>
    </div>
</div>
<script src="/static/layui.js"></script>
</body>

提示

选择框依赖 js, 使用时需要导入 layui.js

  • 若第一项 value 为空，通常只作为选择框提示性引导；若第一项 value 不为空，则作为默认选中项。
  • 通过给选项添加 selected 属性优先设置默认选中项。
  • 通过给 <select> 或 <option> 标签设置 disabled 可禁用整个选择框或某个选项。

在 <select> 标签上同样支持设置表单的其他公共属性

分组选择框 ​

通过 <optgroup> 标签给选择框分组

html

<body>
<div class="layui-form">
    <select>
        <option value="">请选择</option>
        <optgroup label="分组 A">
            <option value="A-1">选项 A-1</option>
            <option value="A-2">选项 A-2</option>
            <option value="A-3">选项 A-3</option>
        </optgroup>
        <optgroup label="分组 B">
            <option value="B-1">选项 B-1</option>
            <option value="B-2">选项 B-2</option>
        </optgroup>
    </select>
</div>
<script src="/static/layui.js"></script>
</body>

搜索选择框 ​

在 <select> 元素上设置 lay-search 可开启选择框的搜索功能

html

<body>
<div class="layui-form">
    <div class="layui-col-md6">
        <select lay-search="">
            <option value="">请选择或搜索（默认不区分大小写）</option>
            <option value="1">AAA</option>
            <option value="2">aaa</option>
            <option value="3">BBB</option>
            <option value="4">bbb</option>
            <option value="5">ABC</option>
            <option value="6">abc</option>
            <option value="7">AbC</option>
        </select>
    </div>
</div>
<script src="/static/layui.js"></script>
</body>
  • 设置 <select lay-search="cs"> 时区分大小写
  • 搜索选择框可以进行分组

选择框事件 ​

js
form.on('select(filter)', callback);
  • select 为选择框事件固定名称
  • filter 为选择框元素对应的 lay-filter 属性值

该事件在选择框选项选中后触发。

html

<body>
<div class="layui-form">
    <select lay-filter="demo-select-filter">
        <option value="">请选择</option>
        <option value="AAA">选项 A</option>
        <option value="BBB">选项 B</option>
        <option value="CCC">选项 C</option>
    </select>
</div>

<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        // select 事件
        form.on('select(demo-select-filter)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
        });
    });
</script>
</body>

复选框 ​

https://layui.dev/docs/2.8/form/checkbox.html

复选框组件是对 <input type="checkbox"> 元素的美化替代，在原有的特性基础上，对 UI 进行了加强。

html

<body>
<div class="layui-form">
    <input type="checkbox" name="AAA" title="默认">
    <input type="checkbox" name="BBB" lay-text="选中" checked>
    <input type="checkbox" name="CCC" title="禁用" disabled>
    <input type="checkbox" name="DDD" title="半选" id="ID-checkbox-ind">
</div>

<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var $ = layui.$;
        // 初始设置半选
        $('#ID-checkbox-ind').prop('indeterminate', true); // 半选属性只能动态设置
        form.render('checkbox');
    });
</script>
</body>
  • 属性 name 是默认提交的字段
  • 属性 title 可设置复选框标题
  • 属性 checked 可设置默认选中
  • 属性 disabled 可设置禁用状态
  • 属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）
  • 属性 lay-skin 可设置复选框风格，可选值：tag2.8+,switch，默认风格可不填

特别地，当表单提交时，只有选中状态的复选框才能获取到 value，这点和浏览器原有的复选框机制相同。

标签风格 ​

html

<div class="layui-form">
    <input type="checkbox" name="AAA" title="默认" lay-skin="tag">
    <input type="checkbox" name="BBB" title="选中" lay-skin="tag" checked>
    <input type="checkbox" name="CCC" title="禁用" lay-skin="tag" disabled>
</div>

开关风格 ​

html

<div class="layui-form">
    <input type="checkbox" name="AAA" lay-skin="switch">
    <br>
    <input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked>
    <br>
    <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
    <br>
    <input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>

在 title 属性中通过 | 分隔符可设置两种状态下的不同标题

复选框事件 ​

风格事件
默认风格 / 标签风格form.on('checkbox(filter)', callback);
开关风格form.on('switch(filter)', callback);
  • checkbox 和 switch 为复选框事件固定名称
  • filter 为复选框元素对应的 lay-filter 属性值

该事件在复选框选中或取消选中时触发。

html

<body>
<div class="layui-form">
    <div class="layui-form-item">
        <input type="checkbox" name="agreement" value="1" title="是否同意" lay-filter="demo-checkbox-filter">
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="demo-checkbox-submit">确认</button>
    </div>
</div>


<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        // checkbox 事件
        form.on('checkbox(demo-checkbox-filter)', function (data) {
            var elem = data.elem; // 获得 checkbox 原始 DOM 对象
            var checked = elem.checked; // 获得 checkbox 选中状态
            var value = elem.value; // 获得 checkbox 值
            var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象

            layer.msg('checked 状态: ' + elem.checked);
        });
    });
</script>
</body>

切换勾选状态时，就会有弹窗显示内容

单选框 ​

单选框组件是对 <input type="radio"> 元素的美化替代。

普通单选框 ​

html

<body>
<div class="layui-form">
    <input type="radio" name="AAA" value="1" title="默认">
    <input type="radio" name="AAA" value="2" title="选中" checked>
    <input type="radio" name="AAA" value="3" title="禁用" disabled>
</div>

<script src="/static/layui.js"></script>
</body>
  • 属性 title 可设置单选框标题
  • 属性 checked 可设置默认选中
  • 属性 disabled 可设置禁用状态
  • 属性 value 可设置值，否则选中时返回的默认值为 on（浏览器默认机制）。同组单选框一般设置相同值。

单选框事件 ​

form.on('radio(filter)', callback);
  • radio 为单选框事件固定名称
  • filter 为单选框元素对应的 lay-filter 属性值

该事件在单选框被点击或选中时触发。

html

<body>
<div class="layui-form">
    <div class="layui-form-item">
        <input type="radio" name="AAA" value="1" title="选项1" lay-filter="demo-radio-filter" checked>
        <input type="radio" name="AAA" value="2" lay-filter="demo-radio-filter" title="选项2">
        <input type="radio" name="AAA" value="3" lay-filter="demo-radio-filter" title="选项3">
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="demo-radio-submit">确认</button>
    </div>
</div>

<script src="/static/layui.js"></script>
<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        // radio 事件
        form.on('radio(demo-radio-filter)', function (data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象

            layer.msg(['value: ' + value, 'checked: ' + checked].join('<br>'));
        });
    });
</script>
</body>