layui学习笔记3--表单

最新推荐文章于 2021-10-24 14:20:28 发布
最新推荐文章于 2021-10-24 14:20:28 发布
阅读量575 收藏
点赞数
文章标签： layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Young_Fee/article/details/79465250
版权

表单

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>开始使用Layui</title>  
  <meta name="renderer" content="webkit">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  <link rel="stylesheet" href="E:/layui/layui/css/layui.css">  
</head>  
<body>  
    <form class="layui-form layui-form-pane" action="">  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">图标</label>  
            <div class="layui-input-block">  
                <i class="layui-icon"></i>   
                <i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>    
            </div>  
        </div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">按钮</label>  
            <div class="layui-input-block">  
                 <button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>  
                 <button class="layui-btn layui-btn-radius">默认按钮</button>  
                 <button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>  
            </div>  
        </div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">按钮</label>  
            <div class="layui-input-block">  
                 <button class="layui-btn">  
                    <i class="layui-icon"></i> 添加  
                 </button>  
                 <button class="layui-btn">  
                    <i class="layui-icon">ဂ</i>   
                 </button>  
                 <div class="layui-btn-group">  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon"></i>  
                    </button>  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon"></i>  
                    </button>  
                    <button class="layui-btn layui-btn-small">  
                        <i class="layui-icon"></i>  
                    </button>  
                    <button class="layui-btn layui-btn-small">  
                     <i class="layui-icon"></i>  
                    </button>  
                </div>  
            </div>  
        </div>  
        <div class="layui-form-item" pane>  
            <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>  
        <div class="layui-form-item">  
            <label class="layui-form-label">开关</label>  
            <div class="layui-input-block">  
                <input type="checkbox" name="switch" lay-skin="switch">  
            </div>  
        </div>  
        <div class="layui-form-item" pane>  
            <label class="layui-form-label">复选框</label>  
            <div class="layui-input-block">  
                <input type="checkbox" name="" title="写作"  checked>  
                <input type="checkbox" name="" title="发呆" lay-skin="primary">  
                <input type="checkbox" name="" title="禁用" lay-skin="primary"  
                    disabled>  
            </div>  
        </div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">输入框</label>  
            <div class="layui-input-block">  
                <input class="layui-input" type="text" required lay-verify="required" placeholder="请输入标题">  
            </div>  
        </div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">密码框</label>  
            <div class="layui-input-inline">  
                <input class="layui-input" type="password" placeholder="请输入密码">  
            </div>  
            <div class="layui-form-mid layui-word-aux">辅助文字</div>  
        </div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">选择框</label>  
            <div class="layui-input-block">  
                <select name="city" lay-verify="required">  
                    <option value=""></option>  
                    <option value="1">石家庄</option>  
                    <option value="2">北京</option>  
                    <option value="3">上海</option>  
                    <option value="4">广州</option>  
                    <option value="5">西安</option>  
                </select>  
            </div>  
        </div>  
        <div class="layui-form-item">  
            <label class="layui-form-label">文本域</label>  
            <div class="layui-input-block">  
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>  
            </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>  
    </form>  


    <script src="E:/layui/layui/layui.js"></script>  
<script>   
//一般直接写在一个js文件中  
layui.use(['layer', 'form'], function(){  
  var layer = layui.layer  
  ,form = layui.form();  

  //监听提交  
  form.on('submit(formDemo)', function(data){  
    layer.msg(JSON.stringify(data.field));  
    return false;  
  });  
});  
</script>   

</body>  
</html>
yangtz_1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui 学习笔记
weixin_36944798的博客
04-23 252
https://www.layui.com/doc/modules/element.html 网站设置 商品管理 订单管理 内容1 内容2 内容3 layui.use(‘element’, function(){ var element = layui.element; //一些事件监听 element.on(‘tab(d...
Layui提交form表单layer.msg无效/layui.form.on触发了异步请求也触发了form表单的action/layui.form.on提交表单后异步没有返回值
最新发布
雾林小妖的博客
06-17 249
Layui提交form表单layer.msg无效/layui.form.on触发了异步请求也触发了form表单的action/layui.form.on提交表单后异步没有返回值
layui学习笔记——表单模块
weixin_34005042的博客
09-09 163
2019独角兽企业重金招聘Python工程师标准>>> ...
layui表格的使用
zhouzhou_98的博客
10-04 776
数据表格【重点】 基本使用 准备json { "code": 0, "msg": "", "count": 101, "data": [ { "id": "10001", "username": "杜甫", ...
layUi学习笔记
qq_42616974的博客
04-10 1150
layui是前端框架 与组件的关系 layer是弹出层效果组件 layDate日期选择器组件 layIM 即时通信组件 layui 下载地址 （http://www.layui.com） layer的使用方法 lay是web弹层组件，下载地址http://layer.layui.com/ 在页面中引入jquery框架（1.8以上） 将下载包中的layer文件夹完整复制到项目中 引入layer目...
LayUi学习笔记
dingcai12003的博客
06-26 462
layui简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是...
【学习笔记】前端框架LayUI.pdf
09-13
3. LayUI的组件 LayUI提供了许多实用的UI组件，以下是一些主要组件： * 弹出层（Layer）：提供了丰富的弹出层效果，开发者可以根据需要自由配置。 * 表单验证（Form）：提供了强大的表单验证功能，帮助开发者快速...
Layui2.x讲义代码笔记.zip
03-25
8. **实战示例**：这份“Layui2.x讲义代码笔记”很可能包含了实际项目中的应用场景，通过学习这些例子，可以更好地掌握Layui2.x的使用技巧和最佳实践。 总的来说，这份资源对于想要深入学习和使用Layui2.x的开发者...
jQuery基于layui表单输入框和滑块拖动验证代码.zip
09-22
《jQuery与layui结合实现表单输入框和滑块拖动验证技术详解》 在Web开发中，用户交互体验是至关重要的，验证则是确保数据正确性的关键环节。本篇将深入探讨如何利用jQuery库和layui框架，实现表单输入框的验证以及...
Jquery_学习笔记.zip
11-01
这篇“Jquery_学习笔记.zip”压缩包显然包含了一位开发者的学习过程，重点是使用jQuery来实现自定义功能，如追加和删除数据行，同时结合了Layui前端框架。Layui是一款轻量级且功能丰富的前端UI框架，它提供了丰富的...
动态SKU库存表格layui实例.zip
10-05
layui是一款流行的前端开发框架，它集成了页面构建、表单处理、表格操作等多种功能，适用于快速开发高效简洁的Web应用。 在描述中，“动态SKU库存表格layui实例”进一步确认了这是一个关于库存管理的实例，而且它...
Layui开发手册.docx
03-05
layui开发手册 整理版
Layui参考手册.pdf
10-20
layui 2.5.6 离线文档，带目录，是使用layui前端人员一份不可多得的参考文档。layui更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来
layUI学习笔记
qq_34336612的博客
02-13 326
记录个人在编码过程中遇到的问题或者其他。 1. class="layui-nav-itemed" 默认展开菜单栏 2.input 判断不为空加入属性lay-verify="required"
layui学习笔记
weixin_30751947的博客
07-11 72
1.table数据重载 格式和render方法中的格式一样，但是可以在url中加入参数 table.render({ elem: '#test6' , cellMinWidth:...
LayUI学习笔记
qq_43496887的博客
10-24 399
目录 一、基本模板 二、栅格布局 一、基本模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用 layui</title> <link r
Layui学习笔记
m0_37939214的博客
11-06 234
 获取复选框的值 Html页面如下 &lt;label class="layui-form-label"&gt;&lt;/label&gt; &lt;div class="layui-input-block"&gt; &lt;input type="checkbox" name="search[logType]" value=
Go语言学习笔记 - 雨痕
"Go学习笔记 By 雨痕" 这是一份由雨痕编写的Go语言学习笔记，详细记录了作者在学习Go语言过程中的心得和知识点。笔记内容涵盖Go语言的基础到高级特性，适合已经观看过无闻大神视频并希望进一步巩固和深入理解Go语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值