登录和注册页面放到一起点击登录界面的注册账号按钮显示注册界面代码
时间: 2023-12-07 17:04:33 浏览: 33
好的,以下是一个简单的示例代码,可以实现在登录页面点击注册按钮,弹出注册页面的功能:
HTML代码(login.html):
```
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="login.js"></script>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="button" id="login" value="Login">
<input type="button" id="register" value="Register">
</form>
</body>
</html>
```
JavaScript代码(login.js):
```
$(document).ready(function() {
$('#register').click(function() {
$('form').hide();
$('body').append('<div id="register-form"><h2>Register</h2><form><label for="new-username">New Username:</label><input type="text" id="new-username" name="new-username"><br><br><label for="new-password">New Password:</label><input type="password" id="new-password" name="new-password"><br><br><input type="button" id="submit" value="Submit"></form></div>');
$('#submit').click(function() {
// 在这里编写提交注册信息的代码
$('#register-form').remove();
$('form').show();
});
});
$('#login').click(function() {
// 在这里编写登录验证的代码
});
});
```
以上代码实现了在登录页面点击注册按钮后,隐藏登录表单,显示注册表单的功能。注册表单中包括输入新用户名和密码的输入框,以及提交按钮。在提交按钮被点击时,可以编写提交注册信息的代码,将新用户的信息存储到数据库中。注册完成后,隐藏注册表单,显示登录表单。