首页 > 其他分享 >layui学习3（静态表格、表单元素）

layui学习3（静态表格、表单元素）

时间：2023-04-22 22:55:41浏览次数：48  
标签：表格 form layui 表单 lay 标签 属性

1.静态表格

表格: <table class="layui-table"></table>
属性:
    lay-even 实现隔行换色效果
    lay-skin="属性值" 【line （行边框风格）、row （列边框风格）、nob （无边框风格）】
    lay-size="属性值" 【sm （小尺寸）、lg （大尺寸）】
表格 - 页面元素 - Layui (ilayuis.com)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态表格</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
<!--
    表格: <table class="layui-table"></table>
    属性:
        lay-even 实现隔行换色效果
        lay-skin="属性值" 【line （行边框风格）、row （列边框风格）、nob （无边框风格）】
        lay-size="属性值" 【sm （小尺寸）、lg （大尺寸）】
-->
    <h2>标准表格</h2>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
        </tbody>
    </table>
<hr>
    <h2>隔行换色效果</h2>
<!--lay-even 实现隔行换色效果-->
    <table class="layui-table" lay-even>
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

 2.表单元素

 

 表单 - 页面元素 - Layui (ilayuis.com)

<!--加载form模块-->
<script type="text/javascript">
    layui.use('form',function (){
       var form = layui.form;
    });
</script>

2.1输入框：

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

required lay-verify="required"：可以用来验证，如果没有填写内容的时候，就会弹出提醒信息；

其中required表示是必填字段

lay-verify:需要验证的类型，required表示必填，还有别的取值如Email。

placeholder:默认显示文本信息

autocomplete:表单是否自动填充

在class中还提供了layui-input-block:占据全部宽度和layui-input-inline:占据部分宽度

<!--    1.在一个容器中设定 class="layui-form" 来标识一个表单元素块    -->
    <form action="" class="layui-form">
<!--        2.基本的行区块结构-->
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
<!--            layui-input-block:表示占一整行，inline就不会占一整行-->
            <div class="layui-input-inline">
<!--                文本框-->
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

 2.2下拉选择框

下拉框:
    lay-verify="required"也是会校验是否为空
    通过selected属性设置默认选项(<option>标签中使用)
    禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用)
分组效果：通过 optgroup 标签给select分组
通过设置lay-search开启搜索功能

实现分组效果

 

 搜索匹配的效果:假如数据有：layer、form、layim输入l就会有匹配的值

代码：

<!--
        下拉框:
            1.lay-verify="required"也是会校验是否为空
            2.通过selected属性设置默认选项(<option>标签中使用)
            3.禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用)
            4.分组效果：通过 optgroup 标签给select分组
            5.通过设置lay-search开启搜索功能
-->
        <div class="layui-form-item">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required" >
                    <option value="">请选择一个城市</option>
                    <option value="010">北京</option>
                    <option value="021" selected>上海</option>
                    <option value="0571" disabled>杭州</option>
                </select>
<!--                分组效果：通过 optgroup 标签给select分组-->
                <select name="quiz">
                    <option value="">请选择</option>
                    <optgroup label="城市记忆">
                        <option value="你工作的第一个城市">你工作的第一个城市？</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="你的工号">你的工号？</option>
                        <option value="你最喜欢的老师">你最喜欢的老师？</option>
                    </optgroup>
                </select>
<!--                开启搜索匹配-->
                <select name="city" lay-verify="" lay-search>
                    <option value="">请选择</option>
                    <option value="010">layer</option>
                    <option value="021">form</option>
                    <option value="0571">layim</option>
                </select>
            </div>
        </div>

2.3复选框

复选框
    1.title属性设置自定义文本（不需要则不设置）
    2.checked选中
    3.lay-skin="parmary"更换为原始的复选框模式
    4.value值为了后台人员能知道选中了什么元素
    5.disabled值可以禁用元素
<!--
    复选框
        1.title属性设置自定义文本（不需要则不设置）
        2.checked选中
        3.lay-skin="parmary"更换为原始的复选框模式
        4.value值为了后台人员能知道选中了什么元素
        5.disabled值可以禁用元素
-->
        <!--基本的行区块结构-->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
<!--                默认复选框-->
                <input type="checkbox" name="hobby" title="唱歌" value="唱歌" checked>
                <input type="checkbox" name="hobby" title="跳舞" value="跳舞">
                <input type="checkbox" name="hobby" title="弹琴" value="弹琴" disabled>
                <br>
<!--                原始效果-->
                <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="唱歌" checked>
                <input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="跳舞">
                <input type="checkbox" name="hobby" title="弹琴" lay-skin="primary" value="弹琴">
            </div>
        </div>

 

 

 

 2.4开关

开关：
    只要把复选框加上一个属性即可lay-skin="switch"
    1.默认打开checked
    2.禁选：disabled
    3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本
    4.通过value属性设置选中提交的值
<!--
    开关：
        只要把复选框加上一个属性即可lay-skin="switch"
        1.默认打开checked
        2.禁选：disabled
        3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本
        4.通过value属性设置选中提交的值
-->
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <!--            layui-input-block:表示占一整行，inline就不会占一整行-->
            <div class="layui-input-block">
                <!--开关：只要给复选框加上一个属性即可,checked表示默认打开-->
                <input type="checkbox" name="a"  lay-skin="switch">
                <input type="checkbox" name="b"  lay-skin="switch" checked>
                <input type="checkbox" name="c"  lay-skin="switch" checked lay-text="on|off">
                <input type="checkbox" name="d"  lay-skin="switch" checked lay-text="打开|关闭" value="打开">
                <input type="checkbox" name="e"  lay-skin="switch"  lay-text="打开|关闭" disabled>
            </div>
        </div>

 2.5单选框

<!--
    单选框
-->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="nan" title="男">
                <input type="radio" name="sex" value="nv" title="女" checked>
                <input type="radio" name="sex" value="" title="中性" disabled>
            </div>
        </div>

 2.6文本域

<!--
    文本域
    <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
-->
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-inline">
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>

 

2.7组装行内表单

 

组装行内表单：
    class="layui-inline"：定义外层行内
    class="layui-input-inline"：定义内层行内
<!--
    组装行内表单：
        class="layui-inline"：定义外层行内
        class="layui-input-inline"：定义内层行内
-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="pwd" placeholder="请输入密码"  class="layui-input">
                </div>
            </div>
        </div>

 2.8忽略美化渲染

单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格
<div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-inline">
                <input type="radio" name="ra" value="" title="男" lay-ignore="">男
                <input type="radio" name="ra" value="" title="男">
            </div>
        </div>

 2.9表单方框风格

表单方框风格：
    layui-form-pane 的class，来设定表单的方框风格
也可以直接在form里面的class追加，这样子就不用一个一个添加。
<!--
    表单方框风格：
        layui-form-pane 的class，来设定表单的方框风格
-->

        <div class="layui-form-item">
            <label class="layui-form-label">渲染效果</label>
            <div class="layui-input-inline">
                <input type="radio" name="ra" value="" title="男" lay-ignore="">男
                <input type="radio" name="ra" value="" title="男">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane" >
            <label class="layui-form-label">原始效果</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>

只在div里面追加的效果

 

在表单追加的效果

 

2.10表单.html代码

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>表单元素</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!--    1.在一个容器中设定 class="layui-form" 来标识一个表单元素块    -->
    <form action="" class="layui-form">
<!--        2.基本的行区块结构-->
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
<!--            layui-input-block:表示占一整行，inline就不会占一整行-->
            <div class="layui-input-inline">
<!--                文本框-->
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>


<!--
        下拉框:
            1.lay-verify="required"也是会校验是否为空
            2.通过selected属性设置默认选项(<option>标签中使用)
            3.禁用下拉框: 添加属性 disabled(<select><option>标签中都可使用)
            4.分组效果：通过 optgroup 标签给select分组
            5.通过设置lay-search开启搜索功能
-->
        <div class="layui-form-item">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required" >
                    <option value="">请选择一个城市</option>
                    <option value="010">北京</option>
                    <option value="021" selected>上海</option>
                    <option value="0571" disabled>杭州</option>
                </select>
<!--                分组效果：通过 optgroup 标签给select分组-->
                <select name="quiz">
                    <option value="">请选择</option>
                    <optgroup label="城市记忆">
                        <option value="你工作的第一个城市">你工作的第一个城市？</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="你的工号">你的工号？</option>
                        <option value="你最喜欢的老师">你最喜欢的老师？</option>
                    </optgroup>
                </select>
<!--                开启搜索匹配-->
                <select name="city" lay-verify="" lay-search>
                    <option value="">请选择</option>
                    <option value="010">layer</option>
                    <option value="021">form</option>
                    <option value="0571">layim</option>
                </select>
            </div>
        </div>

<!--
    复选框
        1.title属性设置自定义文本（不需要则不设置）
        2.checked选中
        3.lay-skin="parmary"更换为原始的复选框模式
        4.value值为了后台人员能知道选中了什么元素
        5.disabled值可以禁用元素
-->
        <!--基本的行区块结构-->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-block">
<!--                默认复选框-->
                <input type="checkbox" name="hobby" title="唱歌" value="唱歌" checked>
                <input type="checkbox" name="hobby" title="跳舞" value="跳舞">
                <input type="checkbox" name="hobby" title="弹琴" value="弹琴" disabled>
                <br>
<!--                原始效果-->
                <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" value="唱歌" checked>
                <input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="跳舞">
                <input type="checkbox" name="hobby" title="弹琴" lay-skin="primary" value="弹琴">
            </div>
        </div>
<!--
    开关：
        只要把复选框加上一个属性即可lay-skin="switch"
        1.默认打开checked
        2.禁选：disabled
        3.自定义，lay-text="打开的值|关闭的值"来设定开关两种状态的文本
        4.通过value属性设置选中提交的值
-->
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <!--            layui-input-block:表示占一整行，inline就不会占一整行-->
            <div class="layui-input-block">
                <!--开关：只要给复选框加上一个属性即可,checked表示默认打开-->
                <input type="checkbox" name="a"  lay-skin="switch">
                <input type="checkbox" name="b"  lay-skin="switch" checked>
                <input type="checkbox" name="c"  lay-skin="switch" checked lay-text="on|off">
                <input type="checkbox" name="d"  lay-skin="switch" checked lay-text="打开|关闭" value="打开">
                <input type="checkbox" name="e"  lay-skin="switch"  lay-text="打开|关闭" disabled>
            </div>
        </div>

<!--
    单选框
-->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="nan" title="男">
                <input type="radio" name="sex" value="nv" title="女" checked>
                <input type="radio" name="sex" value="" title="中性" disabled>
            </div>
        </div>

<!--
    文本域
    <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
-->
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-inline">
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>

<!--
    组装行内表单：
        class="layui-inline"：定义外层行内
        class="layui-input-inline"：定义内层行内
-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="pwd" placeholder="请输入密码"  class="layui-input">
                </div>
            </div>
        </div>

<!--
    忽略美化渲染：
        单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格
-->
        <div class="layui-form-item">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-inline">
                <input type="radio" name="ra" value="" title="男" lay-ignore="">原始效果
                <input type="radio" name="ra" value="" title="男">
            </div>
        </div>

<!--
    表单方框风格：
        layui-form-pane 的class，来设定表单的方框风格
-->

        <div class="layui-form-item">
            <label class="layui-form-label">渲染效果</label>
            <div class="layui-input-inline">
                <input type="radio" name="ra" value="" title="男" lay-ignore="">男
                <input type="radio" name="ra" value="" title="男">
            </div>
        </div>
        <div class="layui-form-item layui-form-pane" >
            <label class="layui-form-label">原始效果</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>


<!--        按钮-->
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>

            </div>
        </div>
    </form>

<!--加载form模块-->
<script type="text/javascript">
    layui.use('form',function (){
       var form = layui.form;
    });
</script>
</body>
</html>

 

标签：表格,form,layui,表单,lay,标签,属性
From： https://www.cnblogs.com/hmy22466/p/17331469.html

相关文章

  • Django—Form两种解决表单数据无法动态刷新的方法
    一、无法动态更新数据的实例#Createyourmodelshere.classClasses(models.Model):title=models.CharField(max_length=32)def__str__(self):returnself.titleclassTeacher(models.Model):name=models.CharField(max_length=32)t2c=model......
  • 一个低代码拖拉拽的表单编辑器，开源咯！！！
    编辑器介绍先来个图，有个初步的认识抱歉，原谅图有点模糊哈github:https://github.com/Liberty-liu/Everright-formEditordemo:https://everright.site/zh-cn/module/formEditor/introduction.htmlEverright-formEditor是一个基于vue3的可视化编辑器，依赖于element-plus和vant进行开......
  • 表格化构建系统-第一阶段成果
    表格化构建系统-第一阶段成果展示连接上了数据库，实现了主要页面和功能能够实现主要的表格化构建的功能，上传完成后，处理完毕会弹出下载链接做出了加载页面，同时前端比较完善，登录注册也能够实现，能够保存用户登录信息  ......
  • # jquery # form表单上传文件
    form表单上传文件<formaction="/upload/"method="post"enctype="multipart/form-data">头像:<inputtype="file"name="head-pic">用户名:<inputtype="text"name="username">......
  • Bootstrap Table表格中存放下拉框，读取数据填充到下拉框
    初学Bootstarp，个人感觉一个功能非常强大的前端框架，由于学习的路途也不是一番风顺的，难免会遇到问题，将遇到的问题整理，可以时常看看，加深记忆。最近做表格需要在表格中加入<select>标签，将数据填充到下拉框，无奈搞了好几个小时也没有成功，最后经过请教身边的大佬，得以解决。代码如下:htt......
  • 表格里，如何实现input失去焦点事件
     一诺佳人创建于 2020-09-0213:33 大佬，请问表格的input框内怎么实现动态失去焦点事件，例如填写数量和单价，金额自动生成， 我在formatter里写了，如下，但是不是自动触发，是点击新增按钮，才会自动计算一次。     参考代码表格字......
  • Django框架——静态文件配置、form表单、request对象、连接数据库、ORM简介、ORM基本
    配置文件介绍SECRET_KEY='0yge9t5m9&%=of**qk2m9z^7-gp2db)g!*5dzb136ys0#)*%*a'#盐DEBUG=True#调试模式,等项目上线的时候，改成False#配置数据库DATABASES={'default':{'ENGINE':'django.db.backends.sqlite3',#默认是自......
  • Vue：表单双绑、组件
    vue一大精髓就是双向绑定vue.js是一个mvvm框架，即数据的双向绑定，即当数据发生变化时的时候，视图也就发生变化，当视图发生变化时，数据也会同步变化双向绑定是对于UI控件来说的，非UI控件不会涉及到数据的双向绑定以input标签举例<divid="app">输入的文本：<inputtype="text"v-......
  • R中6种读入表格数据的方式哪个最快？结果出人意料！
    R怎么读入表格数据最快？R中有6个常用数据读取函数：utils::read.csv:默认使用的读入方式(read.table)readr::read_csv:readr包中的读入函数(RStudio中默认也包含了这一方式)data.table::fread:来自data.table包base::load:加载rda文件base::readRDS:读取二进制数据feather::rea......
  • TransformMine图像表格化构建系统
    今日团队任务:图片转excel(5天)前端开发（需团队风格统一）调用接口（后端），json数据->excel前后端连接           任烁玚(进行中)            图片转html(8天)前端开发（需团队风格统一）图片转为pdf（存储）pdf转html（调用接口）[html存储到数据库]前后台数据同......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99