layui 常见的表单元素
第一步:引用文件
效果图(日期、文件上传在下面):
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</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="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">杭州</option>
</select>
</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="阅读" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</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">
<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 layui-form-text">
<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>
//Demo
layui.use('form', function () {
var form = layui.form(); //监听提交
form.on('submit(formDemo)', function (data) {
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
日期选择效果图:
<body>
<!--layui各种日期对象-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规用法</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">中文版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>范围选择</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test6" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test7" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年月范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test8" placeholder=" - ">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">时间范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test9" placeholder=" - ">
</div>
</div>
</div>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义格式</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">请选择日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test11" placeholder="yyyy年MM月dd日">
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>同时绑定多个</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
</div>
<div class="layui-inline">
<input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
</div>
</div>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>其它功能示例</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">初始赋值</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test19" placeholder="yyyy-MM-dd">
</div>
</div> <div class="layui-inline">
<label class="layui-form-label">不出现底部栏</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test22" placeholder="yyyy-MM-dd">
</div>
</div> <div class="layui-inline">
<label class="layui-form-label" id="test25-1">点我触发</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>其它主题</legend>
</fieldset> <div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">墨绿主题</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test29" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">自定义颜色主题</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test30" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">格子主题</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test31" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div> <script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('laydate', function () {
var laydate = layui.laydate;
//常规用法
laydate.render({
elem: '#test1'
});
//日期范围
laydate.render({
elem: '#test6'
, range: true
});
//年范围
laydate.render({
elem: '#test7'
, type: 'year'
, range: true
});
//年月范围
laydate.render({
elem: '#test8'
, type: 'month'
, range: true
});
//时间范围
laydate.render({
elem: '#test9'
, type: 'time'
, range: true
});
//自定义格式
laydate.render({
elem: '#test11'
, format: 'yyyy年MM月dd日'
});
//同时绑定多个
lay('.test-item').each(function () {
laydate.render({
elem: this
, trigger: 'click'
});
});
//初始赋值
laydate.render({
elem: '#test19'
, value: '1989-10-14'
});
//不出现底部栏
laydate.render({
elem: '#test22'
, showBottom: false
});
//点我触发
laydate.render({
elem: '#test25'
, eventElem: '#test25-1'
, trigger: 'click'
});
//日期只读
laydate.render({
elem: '#test27'
, trigger: 'click'
});
//墨绿主题
laydate.render({
elem: '#test29'
, theme: 'molv'
});
//自定义颜色
laydate.render({
elem: '#test30'
, theme: '#393D49'
});
//格子主题
laydate.render({
elem: '#test31'
, theme: 'grid'
});
});
</script>
<!--layui各种日期对象-->
</body>
上传文件效果图:
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用:普通图片上传</legend>
</fieldset> <div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1">
<p id="demoText"></p>
</div>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset> <div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>指定允许上传的文件类型</legend>
</fieldset> <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设定文件大小限制</legend>
</fieldset> <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
<div class="layui-inline layui-word-aux">
这里以限制 60KB 为例
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>选完文件后不自动上传</legend>
</fieldset> <div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<button type="button" class="layui-btn" id="test9">开始上传</button>
</div> <script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload; //普通图片上传
var uploadInst = upload.render({
elem: '#test1'
, url: '/upload/'
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo1').attr('src', result); //图片链接(base64)
});
}
, done: function (res) {
//如果上传失败
if (res.code > ) {
return layer.msg('上传失败');
}
//上传成功
}
, error: function () {
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
}); //多图片上传
upload.render({
elem: '#test2'
, url: '/upload/'
, multiple: true
, before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
}
, done: function (res) {
//上传完毕
}
}); //指定允许上传的文件类型
upload.render({
elem: '#test3'
, url: '/upload/'
, accept: 'file' //普通文件
, done: function (res) {
console.log(res)
}
});
upload.render({ //允许上传的文件后缀
elem: '#test4'
, url: '/upload/'
, accept: 'file' //普通文件
, exts: 'zip|rar|7z' //只允许上传压缩文件
, done: function (res) {
console.log(res)
}
});
//设定文件大小限制
upload.render({
elem: '#test7'
, url: '/upload/'
, size: //限制文件大小,单位 KB
, done: function (res) {
console.log(res)
}
});
//选完文件后不自动上传
upload.render({
elem: '#test8'
, url: '/upload/'
, auto: false
//,multiple: true
, bindAction: '#test9'
, done: function (res) {
console.log(res)
}
});
});
</script> </body>
layui 常见的表单元素的更多相关文章
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- HTML5表单元素的学习
本文内容 认识表单 基本元素的使用 表单高级元素的使用 现学现卖--创建用户反馈表单 ★ 认识 ...
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- layui渲染form表单
有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = ...
- JavaScript 学习(2)表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- 表单元素 disabled 和 readonly 辨析
正确答案: B D 分析: Readonly 和 Disabled 是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: 1)Readonly只 ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- layui中form表单渲染的问题
layui 官网的这部分文档介绍:http://www.layui.com/doc/modules/form.html#render 注意:针对的是表单元素,input select textare ...
随机推荐
- lua 立即执行函数
背景 不同文件中,lua提供模块写法, 使用local修饰,可以将变量或者函数,声明为模块内有效,例如 模块暴漏变量使用 return 表的方式. local aafunc = function() ...
- Python3快速入门
——<趣学Python-教孩子学编程>学习笔记 1.注释 (1)单行注释以 # 开头注释 # 这是一个注释 print("Hello, World!") (2)多行 ...
- php时间转换
UNIX时间戳和格式化日期是我们常打交道的两个时间表示形式,Unix时间戳存储.处理方便,但是不直观,格式化日期直观,但是处理起来不如Unix时间戳那么自如,所以有的时候需要互相转换,下面给出互相转换 ...
- 用Nodejs连接MySQL
转载,原地址:http://blog.fens.me/nodejs-mysql-intro/ 前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs ...
- 【JS】正则向前查找和向后查找
正向查找:就是匹配前面或后面是什么内容的,所以分类是:正向前查找,正向后查找 负向查找:就是匹配前面或后面不是什么内容的,所以分类是:负向前查找,负向后查找 操作符 说明 描述 (?=exp) 正 ...
- Linux性能查询常用指令
类别 监控指令 描述 备注 内存 瓶颈 free 查看内存使用 cpu 瓶颈 top -Hp 查看cpu使用最高的进程 vmstat 3(间隔时间) 100(监控次数) 查看swap i ...
- 多项式乘法(FFT)学习笔记
------------------------------------------本文只探讨多项式乘法(FFT)在信息学中的应用如有错误或不明欢迎指出或提问,在此不胜感激 多项式 1.系数表示法 ...
- day 11 - 2 装饰器练习
1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件)要求登录成功一次,后续的函数都无需再输入用户名和密码 FLAG = False def login(func): def inner ...
- 在IDEA中新建Spring Boot项目
新建项目 选择项目构建方式 选择项目依赖 新建项目成功后(Maven构建方式)
- mysql 案例 ~ mysql主从复制错误问题
简介 mysql主从不同步的几种情况 一 具体情况 1 主库有memory引擎的内存表 分析 由于memory表的数据存放在内存中,一旦主库数据丢失,从库可能就会发生数据复制异常 ...