登录注册页面layui
时间: 2023-09-28 17:08:29 浏览: 58
你可以使用 layui 提供的样式和组件来创建登录注册页面。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login/Register Page</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-md6 layui-col-md-offset3">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>Login</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">Username</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="Please enter username" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Password</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="Please enter password" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">Login</button>
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
// 初始化 layui
layui.use('form', function(){
var form = layui.form;
// 监听提交事件
form.on('submit(login)', function(data){
// 在这里处理登录请求
console.log(data.field); // 输出表单数据,你可以根据需求进行逻辑处理
return false; // 阻止表单的默认提交行为
});
});
</script>
</body>
</html>
```
在上面的示例代码中,我们引入了 layui 的 CSS 和 JavaScript 文件。使用 layui 提供的样式类和组件来构建了一个简单的登录表单。你可以根据自己的需求进行修改和扩展。
这只是一个简单的示例,你还需要编写后端代码来处理用户的登录请求,以及相关的验证和逻辑操作。