做一个用户注册和登录的页面的代码,注册和登录可以相互切换
时间: 2024-05-13 10:13:46 浏览: 22
以下是一个简单的用户注册和登录页面的代码,使用了HTML、CSS和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>User Registration and Login</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
margin-top: 20px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.switch {
display: block;
text-align: center;
margin-top: 10px;
color: #999;
font-size: 12px;
cursor: pointer;
}
.switch:hover {
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>User Registration and Login</h1>
<form id="register-form">
<h2>Registration</h2>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Register</button>
</form>
<form id="login-form" style="display:none">
<h2>Login</h2>
<label for="login-username">Username</label>
<input type="text" id="login-username" name="username" required>
<label for="login-password">Password</label>
<input type="password" id="login-password" name="password" required>
<button type="submit">Login</button>
</form>
<div class="switch" onclick="toggleForm()">Switch to Login</div>
</div>
<script>
function toggleForm() {
var registerForm = document.getElementById("register-form");
var loginForm = document.getElementById("login-form");
var switchText = document.querySelector(".switch");
if (registerForm.style.display === "none") {
registerForm.style.display = "block";
loginForm.style.display = "none";
switchText.textContent = "Switch to Login"
} else {
registerForm.style.display = "none";
loginForm.style.display = "block";
switchText.textContent = "Switch to Registration"
}
}
document.getElementById("register-form").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log("Registration successful with username: " + username + " and password: " + password);
this.reset();
});
document.getElementById("login-form").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("login-username").value;
var password = document.getElementById("login-password").value;
console.log("Login successful with username: " + username + " and password: " + password);
this.reset();
});
</script>
</body>
</html>
```
这个代码包含了两个表单,一个用于用户注册,一个用于用户登录。在页面上方,有一个切换按钮可以在注册和登录之间切换。切换按钮使用JavaScript编写了一个事件监听器,根据当前显示的表单来切换。
在表单提交时,JavaScript也编写了事件监听器。当用户在注册表单中提交时,JavaScript会获取用户名和密码,将其打印到控制台,并重置表单。当用户在登录表单中提交时,JavaScript也会获取用户名和密码,将其打印到控制台,并重置表单。
需要注意的是,这个代码仅为演示用途,未进行任何安全性检查和验证。在实际应用中,需要对用户输入进行验证和加密,以确保用户数据的安全性。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)