以下是一个简单的Web前端登录注册界面的示例代码，包括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 & Register Form</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>
<div class="form-container">
<h2>Register</h2>
<form id="registerForm">
<label for="registerUsername">Username:</label>
<input type="text" id="registerUsername" required>
<label for="registerEmail">Email:</label>
<input type="text" id="registerEmail" required>
<label for="registerPassword">Password:</label>
<input type="password" id="registerPassword" required>
<button type="submit">Register</button>
</form>
</div>
<script>
// Login form submission handler
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('loginUsername').value;
var password = document.getElementById('loginPassword').value;
// Here, you would send the login data to the server for verification
console.log('Login submitted:', username, password);
});
// Register form submission handler
document.getElementById('registerForm').addEventListener('submit', function(event) {
event.preventDefault();
var username = document.getElementById('registerUsername').value;
var ema