用HTML+CSS+JS做一个有登陆注册以及点击登陆成功之后会跳转到一个新的界面
时间: 2023-08-11 20:06:32 浏览: 89
好的,以下是一个简单的 HTML+CSS+JS 登录注册页面的示例:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
<style>
body {
background-color: #f2f2f2;
}
form {
margin: auto;
width: 50%;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="password"] {
display: block;
width: 100%;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form id="login-form">
<h2>Login</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>
<input type="submit" value="Login">
</form>
<form id="register-form" style="display: none;">
<h2>Register</h2>
<label for="new-username">Username:</label>
<input type="text" id="new-username" name="new-username" required>
<label for="new-password">Password:</label>
<input type="password" id="new-password" name="new-password" required>
<input type="submit" value="Register">
</form>
<script>
// 切换登录和注册表单
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
document.getElementById("new-account").addEventListener("click", () => {
loginForm.style.display = "none";
registerForm.style.display = "block";
});
document.getElementById("existing-account").addEventListener("click", () => {
loginForm.style.display = "block";
registerForm.style.display = "none";
});
// 处理登录和注册表单提交
loginForm.addEventListener("submit", (event) => {
event.preventDefault();
// 处理登录逻辑,这里只是简单地跳转到新页面
window.location.href = "success.html";
});
registerForm.addEventListener("submit", (event) => {
event.preventDefault();
// 处理注册逻辑,这里只是简单地跳转到新页面
window.location.href = "success.html";
});
</script>
</body>
</html>
```
这个页面包含了一个登录表单和一个注册表单,可以通过点击切换。当用户在登录表单中输入用户名和密码并提交表单时,会跳转到一个名为 `success.html` 的新页面。注册表单的逻辑也类似。你可以根据自己的需求修改代码。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)