layui制作登录界面
时间: 2023-09-03 15:13:30 浏览: 49
下面是使用Layui制作登录界面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.5/css/layui.css">
<style>
.login-box {
margin: 100px auto;
width: 400px;
border: 1px solid #ccc;
padding: 20px;
}
.login-box h1 {
text-align: center;
margin-bottom: 20px;
}
.login-box form {
margin-bottom: 20px;
}
.login-box .layui-input {
height: 40px;
line-height: 40px;
}
.login-box .layui-btn {
width: 100%;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="login-box">
<h1>用户登录</h1>
<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>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layui/2.5.5/layui.all.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(login)', function(data){
//TODO 登录提交处理
return false;
});
});
</script>
</body>
</html>
```
这是一个简单的登录界面,包括一个用户名输入框、一个密码输入框和一个登录按钮,使用了Layui的表单组件和按钮组件。在JavaScript代码中,使用了Layui的表单模块,监听了登录按钮的提交事件,可以在事件处理函数中提交表单数据到后台进行验证和处理。