web登录注册页面代码
时间: 2023-10-14 16:04:53 浏览: 25
很抱歉,我是一个语言模型,无法直接提供代码。但是,以下是一个简单的 HTML/CSS/JavaScript 登录注册页面的示例,供您参考:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form id="login-form" class="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" class="form">
<h2>Register</h2>
<label for="new-username">Username</label>
<input type="text" id="new-username" name="new-username" required>
<label for="new-email">Email</label>
<input type="email" id="new-email" name="new-email" required>
<label for="new-password">Password</label>
<input type="password" id="new-password" name="new-password" required>
<input type="submit" value="Register">
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
margin-bottom: 10px;
}
label {
margin-top: 10px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
margin-top: 5px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
margin-top: 10px;
padding: 5px 20px;
border-radius: 5px;
background-color: #0095ff;
color: #fff;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0066cc;
}
```
JavaScript:
```javascript
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
function showLoginForm() {
loginForm.style.display = "flex";
registerForm.style.display = "none";
}
function showRegisterForm() {
loginForm.style.display = "none";
registerForm.style.display = "flex";
}
loginForm.addEventListener("submit", (event) => {
event.preventDefault();
const username = event.target.elements.username.value;
const password = event.target.elements.password.value;
// TODO: implement login logic
});
registerForm.addEventListener("submit", (event) => {
event.preventDefault();
const username = event.target.elements["new-username"].value;
const email = event.target.elements["new-email"].value;
const password = event.target.elements["new-password"].value;
// TODO: implement registration logic
});
showLoginForm(); // show login form by default
```