登录双页面切换html
时间: 2023-07-25 17:24:25 浏览: 22
好的,我可以为您提供一个简单的登录双页面切换的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
body {
background-color: #f2f2f2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin: 10px;
width: 80%;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px #ccc;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
box-shadow: 0px 0px 5px #ccc;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<div class="form">
<h2>Login</h2>
<form id="login-form">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<p>Don't have an account? <a href="#" id="signup-link">Sign up</a></p>
</div>
</div>
<div class="container" style="display: none;" id="signup-container">
<div class="form">
<h2>Sign up</h2>
<form id="signup-form">
<input type="text" id="new-username" placeholder="Username">
<input type="password" id="new-password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<p>Already have an account? <a href="#" id="login-link">Login</a></p>
</div>
</div>
<script>
// Login form
const loginForm = document.getElementById("login-form");
loginForm.addEventListener("submit", function(e) {
e.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// TODO: Perform login action
console.log(username, password);
});
// Signup form
const signupForm = document.getElementById("signup-form");
signupForm.addEventListener("submit", function(e) {
e.preventDefault();
const newUsername = document.getElementById("new-username").value;
const newPassword = document.getElementById("new-password").value;
// TODO: Perform signup action
console.log(newUsername, newPassword);
});
// Switch to signup form
const signupLink = document.getElementById("signup-link");
signupLink.addEventListener("click", function(e) {
e.preventDefault();
document.getElementById("signup-container").style.display = "flex";
document.getElementById("login-container").style.display = "none";
});
// Switch to login form
const loginLink = document.getElementById("login-link");
loginLink.addEventListener("click", function(e) {
e.preventDefault();
document.getElementById("signup-container").style.display = "none";
document.getElementById("login-container").style.display = "flex";
});
</script>
</body>
</html>
```
这段代码实现了一个简单的登录和注册双页面切换,包括两个表单和两个链接。点击“Sign up”链接会切换到注册表单,点击“Login”链接会切换回登录表单。您可以在表单提交事件中编写适当的 JavaScript 代码来处理登录或注册操作。
相关推荐
![htm](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)