idea写一个登录注册页面
时间: 2023-11-23 09:59:54 浏览: 90
登录注册页面:
1. 页面标题:欢迎登录或注册
2. 登录表单:
- 用户名输入框
- 密码输入框
- 登录按钮
3. 注册表单:
- 用户名输入框
- 密码输入框
- 重复密码输入框
- 邮箱输入框
- 注册按钮
4. 其他提示信息:
- 忘记密码链接
- 已有账号,直接登录链接
5. 页面布局:
- 居中显示
- 注册表单默认隐藏,点击注册按钮后显示
- 登录和注册表单在同一页面,切换显示
6. 页面交互:
- 用户名和密码不能为空
- 注册时,密码和重复密码必须一致
- 注册时,邮箱必须符合格式要求
- 注册成功后自动跳转到登录页面
- 登录成功后跳转到首页,显示欢迎信息和用户信息
7. 页面样式:
- 使用简洁的设计风格
- 使用统一的颜色和字体风格
- 按钮使用明显的样式区分,如颜色、大小等
- 输入框使用边框和阴影等效果,增加立体感
示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登录或注册</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 14px;
}
#container {
width: 400px;
margin: 100px auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
font-size: 24px;
margin-top: 30px;
}
form {
padding: 20px;
box-sizing: border-box;
}
input {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
a {
display: block;
text-align: center;
margin-top: 10px;
color: #007bff;
}
#register-form {
display: none;
}
</style>
</head>
<body>
<div id="container">
<h1>欢迎登录或注册</h1>
<form id="login-form">
<input type="text" placeholder="用户名" name="username">
<input type="password" placeholder="密码" name="password">
<button type="submit">登录</button>
<a href="#">忘记密码</a>
<a href="#" id="register-link">没有账号?注册</a>
</form>
<form id="register-form">
<input type="text" placeholder="用户名" name="username">
<input type="password" placeholder="密码" name="password">
<input type="password" placeholder="重复密码" name="password-confirm">
<input type="email" placeholder="邮箱" name="email">
<button type="submit">注册</button>
<a href="#" id="login-link">已有账号,直接登录</a>
</form>
</div>
<script>
var loginForm = document.getElementById('login-form');
var registerForm = document.getElementById('register-form');
var registerLink = document.getElementById('register-link');
var loginLink = document.getElementById('login-link');
// 切换到注册表单
registerLink.addEventListener('click', function (event) {
event.preventDefault();
loginForm.style.display = 'none';
registerForm.style.display = 'block';
});
// 切换到登录表单
loginLink.addEventListener('click', function (event) {
event.preventDefault();
registerForm.style.display = 'none';
loginForm.style.display = 'block';
});
// 登录表单提交事件
loginForm.addEventListener('submit', function (event) {
event.preventDefault();
// TODO: 处理登录逻辑
alert('登录成功!');
});
// 注册表单提交事件
registerForm.addEventListener('submit', function (event) {
event.preventDefault();
// TODO: 处理注册逻辑
alert('注册成功!');
// 注册成功后自动跳转到登录页面
registerForm.style.display = 'none';
loginForm.style.display = 'block';
});
</script>
</body>
</html>
```