diff --git a/css/common.css b/css/common.css
index a3205a3..715cf8d 100644
--- a/css/common.css
+++ b/css/common.css
@@ -13,6 +13,8 @@
     .ok-search .layui-btn{margin-left:0;margin-top:10px}
 }
 
+.ok-search-form .layui-inline .layui-input-inline{margin-bottom: 5px;}
+
 /*表单*/
 .ok-form{margin-top:10px}
 
diff --git a/data/navs.json b/data/navs.json
index 85cdab0..0111d88 100644
--- a/data/navs.json
+++ b/data/navs.json
@@ -176,6 +176,18 @@
     "icon": "&#xe705;",
     "spread": false,
     "children": [
+      {
+        "title": "复杂表单一",
+        "href": "pages/often/form-complex1.html",
+        "icon": "&#xe62e;",
+        "spread": false
+      },
+      {
+        "title": "复杂表单二",
+        "href": "pages/often/form-complex2.html",
+        "icon": "&#xe62e;",
+        "spread": false
+      },
       {
         "title": "文章列表",
         "href": "pages/often/article.html",
diff --git a/pages/often/form-complex1.html b/pages/often/form-complex1.html
new file mode 100644
index 0000000..c9b86c0
--- /dev/null
+++ b/pages/often/form-complex1.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>复杂表单一</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<link rel="stylesheet" href="../../css/oksub.css">
+	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
+</head>
+<body>
+<div class="ok-body">
+	<!--模糊搜索区域-->
+	<div class="layui-row">
+		<form class="layui-form ok-search-form">
+			<div class="layui-form-item">
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="账号" autocomplete="off" name="username">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="姓名" autocomplete="off" name="name">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="昵称" autocomplete="off" name="nickname">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="邮箱" autocomplete="off" name="email">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<select name="role" lay-verify="">
+							<option value="" selected>请选择角色</option>
+							<option value="0">超级会员</option>
+							<option value="1">普通用户</option>
+						</select>
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<select name="status" lay-verify="">
+							<option value="" selected>请选择状态</option>
+							<option value="0">已启用</option>
+							<option value="1">已停用</option>
+						</select>
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<button class="layui-btn" lay-submit="" lay-filter="search">
+							<i class="layui-icon">&#xe615;</i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+	<!--数据表格-->
+	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script>
+	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
+		let table = layui.table;
+		let form = layui.form;
+		let laydate = layui.laydate;
+		let okLayer = layui.okLayer;
+		let okUtils = layui.okUtils;
+		let okMock = layui.okMock;
+		let $ = layui.jquery;
+
+		laydate.render({elem: "#startTime", type: "datetime"});
+		laydate.render({elem: "#endTime", type: "datetime"});
+		okLoading.close($);
+		let userTable = table.render({
+			elem: '#tableId',
+			url: okMock.api.listUser,
+			limit: 20,
+			page: true,
+			toolbar: true,
+			toolbar: "#toolbarTpl",
+			size: "sm",
+			cols: [[
+				{type: "checkbox", fixed: "left"},
+				{field: "id", title: "ID", width: 160, sort: true},
+				{field: "username", title: "账号", width: 100},
+				{field: "password", title: "密码", width: 100},
+				{field: "name", title: "姓名", width: 100},
+				{field: "nickname", title: "昵称", width: 100},
+				{field: "role", title: "角色", width: 100, templet: "#roleTpl"},
+				{field: "status", title: "状态", width: 100, templet: "#statusTpl"},
+				{field: "email", title: "邮箱", width: 200},
+				{field: "province", title: "省份", width: 120},
+				{field: "city", title: "城市", width: 100},
+				{field: "county", title: "区县", width: 120},
+				{field: "logins", title: "登陆次数", width: 100},
+				{field: "createTime", title: "创建时间", width: 150},
+				{field: "updateTime", title: "更新时间", width: 150},
+				{title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
+			]],
+			done: function (res, curr, count) {
+				console.info(res, curr, count);
+			}
+		});
+
+		form.on("submit(search)", function (data) {
+			userTable.reload({
+				where: data.field,
+				page: {curr: 1}
+			});
+			return false;
+		});
+
+		table.on("toolbar(tableFilter)", function (obj) {
+			switch (obj.event) {
+				case "batchEnabled":
+					batchEnabled();
+					break;
+				case "batchDisabled":
+					batchDisabled();
+					break;
+				case "batchDel":
+					batchDel();
+					break;
+				case "add":
+					add();
+					break;
+			}
+		});
+
+		table.on("tool(tableFilter)", function (obj) {
+			let data = obj.data;
+			switch (obj.event) {
+				case "edit":
+					edit(data);
+					break;
+				case "del":
+					del(data.id);
+					break;
+			}
+		});
+
+		function batchEnabled() {
+			okLayer.confirm("确定要批量启用吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/normalUser", "put", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function batchDisabled() {
+			okLayer.confirm("确定要批量停用吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/stopUser", "put", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function batchDel() {
+			okLayer.confirm("确定要批量删除吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/deleteUser", "delete", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function add() {
+			okLayer.open("添加用户", "user-add.html", "90%", "90%", null, function () {
+				userTable.reload();
+			})
+		}
+
+		function edit(data) {
+			okLayer.open("更新用户", "user-edit.html", "90%", "90%", function (layero) {
+				let iframeWin = window[layero.find("iframe")[0]["name"]];
+				iframeWin.initForm(data);
+			}, function () {
+				userTable.reload();
+			})
+		}
+
+		function del(id) {
+			okLayer.confirm("确定要删除吗？", function () {
+				okUtils.ajax("/user/deleteUser", "delete", {idsStr: id}, true).done(function (response) {
+					console.log(response);
+					okUtils.tableSuccessMsg(response.msg);
+				}).fail(function (error) {
+					console.log(error)
+				});
+			})
+		}
+	})
+</script>
+<!-- 头工具栏模板 -->
+<script type="text/html" id="toolbarTpl">
+	<div class="layui-btn-container">
+		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量启用</button>
+		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量停用</button>
+		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
+		<button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
+	</div>
+</script>
+<!-- 行工具栏模板 -->
+<script type="text/html" id="operationTpl">
+	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
+	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
+</script>
+<!-- 启用|停用模板 -->
+<script type="text/html" id="statusTpl">
+	{{#  if(d.status == 0){ }}
+	<span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
+	{{#  } else if(d.status == 1) { }}
+	<span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
+	{{#  } }}
+</script>
+<script type="text/html" id="roleTpl">
+	{{#  if(d.role == 0){ }}
+	<span class="layui-btn layui-btn-normal layui-btn-xs">超级会员</span>
+	{{#  } else if(d.role == 1) { }}
+	<span class="layui-btn layui-btn-warm layui-btn-xs">普通用户</span>
+	{{#  } }}
+</script>
+</body>
+</html>
diff --git a/pages/often/form-complex2.html b/pages/often/form-complex2.html
new file mode 100644
index 0000000..05a4b2d
--- /dev/null
+++ b/pages/often/form-complex2.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>复杂表单二</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<link rel="stylesheet" href="../../css/oksub.css">
+	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
+</head>
+<body>
+<div class="ok-body">
+	<!--模糊搜索区域-->
+	<div class="layui-row">
+		<form class="layui-form ok-search-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" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">截止日期</label>
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">账号</label>
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="账号" autocomplete="off" name="username">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">姓名</label>
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="姓名" autocomplete="off" name="name">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">昵称</label>
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="昵称" autocomplete="off" name="nickname">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">邮箱</label>
+					<div class="layui-input-inline">
+						<input type="text" class="layui-input" placeholder="邮箱" autocomplete="off" name="email">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">请选择角色</label>
+					<div class="layui-input-inline">
+						<select name="role" lay-verify="">
+							<option value="" selected>请选择角色</option>
+							<option value="0">超级会员</option>
+							<option value="1">普通用户</option>
+						</select>
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">请选择状态</label>
+					<div class="layui-input-inline">
+						<select name="status" lay-verify="">
+							<option value="" selected>请选择状态</option>
+							<option value="0">已启用</option>
+							<option value="1">已停用</option>
+						</select>
+					</div>
+				</div>
+				<div class="layui-inline">
+					<div class="layui-input-inline">
+						<button class="layui-btn" lay-submit="" lay-filter="search">
+							<i class="layui-icon">&#xe615;</i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</form>
+	</div>
+	<!--数据表格-->
+	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script>
+	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
+		let table = layui.table;
+		let form = layui.form;
+		let laydate = layui.laydate;
+		let okLayer = layui.okLayer;
+		let okUtils = layui.okUtils;
+		let okMock = layui.okMock;
+		let $ = layui.jquery;
+
+		laydate.render({elem: "#startTime", type: "datetime"});
+		laydate.render({elem: "#endTime", type: "datetime"});
+		okLoading.close($);
+		let userTable = table.render({
+			elem: '#tableId',
+			url: okMock.api.listUser,
+			limit: 20,
+			page: true,
+			toolbar: true,
+			toolbar: "#toolbarTpl",
+			size: "sm",
+			cols: [[
+				{type: "checkbox", fixed: "left"},
+				{field: "id", title: "ID", width: 160, sort: true},
+				{field: "username", title: "账号", width: 100},
+				{field: "password", title: "密码", width: 100},
+				{field: "name", title: "姓名", width: 100},
+				{field: "nickname", title: "昵称", width: 100},
+				{field: "role", title: "角色", width: 100, templet: "#roleTpl"},
+				{field: "status", title: "状态", width: 100, templet: "#statusTpl"},
+				{field: "email", title: "邮箱", width: 200},
+				{field: "province", title: "省份", width: 120},
+				{field: "city", title: "城市", width: 100},
+				{field: "county", title: "区县", width: 120},
+				{field: "logins", title: "登陆次数", width: 100},
+				{field: "createTime", title: "创建时间", width: 150},
+				{field: "updateTime", title: "更新时间", width: 150},
+				{title: "操作", width: 100, align: "center", fixed: "right", templet: "#operationTpl"}
+			]],
+			done: function (res, curr, count) {
+				console.info(res, curr, count);
+			}
+		});
+
+		form.on("submit(search)", function (data) {
+			userTable.reload({
+				where: data.field,
+				page: {curr: 1}
+			});
+			return false;
+		});
+
+		table.on("toolbar(tableFilter)", function (obj) {
+			switch (obj.event) {
+				case "batchEnabled":
+					batchEnabled();
+					break;
+				case "batchDisabled":
+					batchDisabled();
+					break;
+				case "batchDel":
+					batchDel();
+					break;
+				case "add":
+					add();
+					break;
+			}
+		});
+
+		table.on("tool(tableFilter)", function (obj) {
+			let data = obj.data;
+			switch (obj.event) {
+				case "edit":
+					edit(data);
+					break;
+				case "del":
+					del(data.id);
+					break;
+			}
+		});
+
+		function batchEnabled() {
+			okLayer.confirm("确定要批量启用吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/normalUser", "put", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function batchDisabled() {
+			okLayer.confirm("确定要批量停用吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/stopUser", "put", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function batchDel() {
+			okLayer.confirm("确定要批量删除吗？", function (index) {
+				layer.close(index);
+				let idsStr = okUtils.tableBatchCheck(table);
+				if (idsStr) {
+					okUtils.ajax("/user/deleteUser", "delete", {idsStr: idsStr}, true).done(function (response) {
+						console.log(response);
+						okUtils.tableSuccessMsg(response.msg);
+					}).fail(function (error) {
+						console.log(error)
+					});
+				}
+			});
+		}
+
+		function add() {
+			okLayer.open("添加用户", "user-add.html", "90%", "90%", null, function () {
+				userTable.reload();
+			})
+		}
+
+		function edit(data) {
+			okLayer.open("更新用户", "user-edit.html", "90%", "90%", function (layero) {
+				let iframeWin = window[layero.find("iframe")[0]["name"]];
+				iframeWin.initForm(data);
+			}, function () {
+				userTable.reload();
+			})
+		}
+
+		function del(id) {
+			okLayer.confirm("确定要删除吗？", function () {
+				okUtils.ajax("/user/deleteUser", "delete", {idsStr: id}, true).done(function (response) {
+					console.log(response);
+					okUtils.tableSuccessMsg(response.msg);
+				}).fail(function (error) {
+					console.log(error)
+				});
+			})
+		}
+	})
+</script>
+<!-- 头工具栏模板 -->
+<script type="text/html" id="toolbarTpl">
+	<div class="layui-btn-container">
+		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量启用</button>
+		<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量停用</button>
+		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
+		<button class="layui-btn layui-btn-sm" lay-event="add">添加用户</button>
+	</div>
+</script>
+<!-- 行工具栏模板 -->
+<script type="text/html" id="operationTpl">
+	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
+	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
+</script>
+<!-- 启用|停用模板 -->
+<script type="text/html" id="statusTpl">
+	{{#  if(d.status == 0){ }}
+	<span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
+	{{#  } else if(d.status == 1) { }}
+	<span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
+	{{#  } }}
+</script>
+<script type="text/html" id="roleTpl">
+	{{#  if(d.role == 0){ }}
+	<span class="layui-btn layui-btn-normal layui-btn-xs">超级会员</span>
+	{{#  } else if(d.role == 1) { }}
+	<span class="layui-btn layui-btn-warm layui-btn-xs">普通用户</span>
+	{{#  } }}
+</script>
+</body>
+</html>
