【HTML+CSS+JS】登录注册页面大合集
以下是一个简单的登录和注册页面的示例，使用了HTML、CSS和JavaScript。
<!-- 登录页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
body { font-family: Arial, sans-serif; }
.form-container { max-width: 300px; margin: 50px auto; }
form { display: flex; flex-direction: column; }
form label { margin-bottom: 10px; }
form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
form button { margin-top: 10px; }
</style>
</head>
<body>
<div class="form-container">
<h2>Login</h2>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" required>
<button type="submit">Login</button>
</form>
</div>
<script>
const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(event) {
event.preventDefault();
const username = loginUsername.value;
const password = loginPassword.value;
// 在这里添加登录验证逻辑
console.log('Login with username: ' + username);
});
</script>
</body>
</html>
<!-- 注册页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<style>
body { font-family: Arial, sans-serif; }
.form-container { max-width: 300px; margin: 50px auto; }
form { display: flex; flex-direction: column; }
form label { margin-bottom: 10px; }
form input[type="text"], form input[type="email"], form input[type="password"] { margin-bottom: 10px; }
form button { margin-top: 10px; }
</style>
</head>
<body>
<div class="form-container">
<h2>Sign Up</h2>
<form id="signupForm">
<label for="signupUsername">Username:</label>
<input type="text" id="signupUsername" required>
<label for="signupEmail">Email:</label>
<input type="email" id="signupEmail" required>
<label for="signupPassword">Password:</label>
<input type="password" id="signupPassword" required>
<button type="submit">Sign Up</button>
</form>
</div>
<script>
const signupForm = document.getElementById('signupForm');
signupForm.addEven
评论已关闭