html登录注册页面代码怎么写
时间: 2023-10-10 19:08:00 浏览: 30
下面是一个简单的 HTML 登录注册页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container {
padding: 16px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.error {
color: red;
font-size: 12px;
margin-top: -10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form id="loginForm" action="#" method="post">
<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">Login</button>
<p>Don't have an account? <a href="#" onclick="toggleForm()">Register here</a></p>
</form>
<form id="registerForm" action="#" method="post" style="display: none">
<h2>Register</h2>
<label for="newUsername">Username</label>
<input type="text" id="newUsername" name="newUsername" required>
<label for="newPassword">Password</label>
<input type="password" id="newPassword" name="newPassword" required>
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
<button type="submit">Register</button>
<p>Already have an account? <a href="#" onclick="toggleForm()">Login here</a></p>
</form>
<div id="errorMessage" class="error" style="display: none"></div>
</div>
<script>
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
const errorMessage = document.getElementById("errorMessage");
function toggleForm() {
loginForm.style.display = loginForm.style.display === "none" ? "block" : "none";
registerForm.style.display = registerForm.style.display === "none" ? "block" : "none";
errorMessage.style.display = "none";
}
loginForm.addEventListener("submit", function(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// TODO: check if the username and password are correct and logged the user in
errorMessage.style.display = "none";
});
registerForm.addEventListener("submit", function(event) {
event.preventDefault();
const newUsername = document.getElementById("newUsername").value;
const newPassword = document.getElementById("newPassword").value;
const confirmPassword = document.getElementById("confirmPassword").value;
if (newPassword !== confirmPassword) {
errorMessage.innerText = "Passwords do not match";
errorMessage.style.display = "block";
} else {
// TODO: create a new user with the username and password and log them in
errorMessage.style.display = "none";
}
});
</script>
</body>
</html>
```
该示例包括两个表单,一个用于登录,另一个用于注册。当用户单击“注册”链接时,将切换表单。表单使用了一些基本的 CSS 样式,来使其看起来更好看一些,并且包含了一些 JavaScript 代码来处理表单的提交和切换。请注意,此示例中的登录和注册功能仅为示例,需要根据实际情况进行修改。