摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui表单</title> <link rel="stylesheet" type="text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui表单</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="background:blue;">
<div style="margin:270px auto;box-shadow:2px 2px 10px 2px #999;width:500px;background-color:#fff;padding:20px;border-radius: 5px;">
<form class="layui-form" action="">
<div class="layui-form-item" style="color:gray;">
<h2>后台管理系统</h2>
</div>
<hr>
<!-- 用户名 -->
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input class="layui-input" placeholder="请输入用户名" type="text" name="user"/>
</div>
</div>
<!-- 密码 -->
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input class="layui-input" placeholder="请输入密码" type="text" name="pass" />
</div>
</div>
<!-- 验证码 -->
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input class="layui-input" type="text" placeholder="请输入验证码" name='yc'/>
</div>
<img src="img/yz.png" >
</div>
<!-- 登录 -->
<div class="layui-form-item">
<div class="layui-input-block">
<!-- lay-submit提交按钮 lay-filter监听提交属性 -->
<button class="layui-btn" lay-submit lay-filter="formDemo" >登录</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
//layui初始化函数
var list = layui.use('form',function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)',function(data){
//data.field json数据
//JSON.stringify 将json数据转换成字符串
//layer.msg 消息提示框
layer.msg(JSON.stringify(data.field));
return false; //false阻止提交
})
});
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-30 09:27:24
老师总结：不错不错 写的很棒 使用layui来完成登录界面是再轻松不过的 继续加油吧
