登录页面模板代码
登录页面的模板代码可以根据具体的需求而有所不同，
html<!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;
background-color: #f4f4f4;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-container h2 {
text-align: center;
color: #333;
}
.login-form {
margin-top: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
background-color: #3498db;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
.form-group button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form class="login-form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>
这是一个简单的登录页面模板，包含用户名、密码输入框以及登录按钮。你可以根据实际需要添加额外的功能，如记住密码、忘记密码链接等。在实际应用中，为了安全性，通常还需要在后端进行身份验证和处理。
html<!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>
/* 略，与前面相同的样式 */
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form class="login-form" onsubmit="login(event)">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<script>
function login(event) {
event.preventDefault(); // 阻止表单提交默认行为
// 获取用户名和密码
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 模拟AJAX请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/your-backend-login-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert('Login successful!');
// 可以在这里跳转到其他页面或执行其他操作
} else {
alert('Login failed. Please check your credentials.');
}
}
};
// 发送数据到后端
xhr.send(JSON.stringify({ username: username, password: password }));
}
</script>
</body>
</html>
在上面的代码中，login函数通过AJAX发送用户名和密码到后端，然后根据后端的响应进行相应的处理。实际应用中，你需要替换 /your-backend-login-endpoint 为你的后端登录接口的实际路径，并确保后端能够处理这个请求并返回正确的响应。
此外，为了安全性和用户体验，你可能还需要添加更多的功能，如密码加密、错误处理、加载指示器等。
