用layui写一个登录页面
时间: 2023-04-03 19:05:09 浏览: 76
好的,我可以回答这个问题。以下是使用layui框架编写登录页面的示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md-offset3 layui-col-md6">
<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="username" 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-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(login)', function(data){
//提交表单
return false;
});
});
</script>
</body>
</html>
以上代码使用layui框架实现了一个简单的登录页面,包括用户名和密码的输入框以及登录按钮。在提交表单时,可以通过Ajax将用户名和密码发送到后台进行验证。