表单
<!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>