layui 表单页面代码
来源:互联网 发布:win7一直正在识别网络 编辑:程序博客网 时间:2024/05/20 13:17
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/layui.css"></head><body><form action="" class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">写作</option> <option value="1">阅读</option> </select> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">开关</label> <div class="layui-input-block"> <input type="checkbox" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="写作"> <input type="checkbox" name="like[read]" title="阅读"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> <input type="radio" name="sex" value="1" title="女" checked> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">请填写描述</label> <div class="layui-input-block"> <textarea name="" placeholder="请输入内容" class="layui-textarea" id="" ></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div></form><script src="layui.js"></script><script> layui.use('form', function(){ var form = layui.form; //各种基于事件的操作,下面会有进一步介绍 });</script></body></html>
必须加入最后一对标签并声明使用form,才有各种控件的样式。
附上效果图,初次接触layui前台框架,感觉样式很清爽!!
阅读全文
0 0
- layui 表单页面代码
- layui在form表单页面通过Validform加入简单验证
- layui 表单验证案例
- layui-表单集合
- layui原生表单验证
- layui表单验证demo
- layui自定义表单校验
- Layui之表单form
- layui 页面控件
- layui 手动验证表单问题
- layui 表单标签的校验
- Layui 代码装饰器
- layui页面加载简单模式
- layui里的表单元素的使用
- 【layui】表单元素radio不显示渲染
- LayUI表单获取不到data的解决办法
- layui 表单元素的选中问题
- layui 弹出层的表单提交
- Markup.h和Markup.cpp Release 11.5
- 为什么你的简历投出去石沉大海?
- 如何让body背景图自适应浏览器窗口大小
- 创建一个sd下面的文件夹作为硬盘缓存的路径和Application应用
- IRedMail卸载升级
- layui 表单页面代码
- UI测试问题
- centos系统下比较工具的比较
- Java
- SQL SERVER 编程基本语法
- 给定a、b两个文件,各存放50亿个url,每个url各占用64字节,内存限制是4G,如何找出a、b文件共同的url?
- Cocos Creator如何导入Cocos2d-x工程 【Mac】
- oracle列求平均
- 关于linux内核空间与用户空间的理解