回顾web前端的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 350px;
}
.login-title {
text-align: center;
color: #1a73e8;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #5f6368;
}
input {
width: 100%;
padding: 0.8rem;
border: 1px solid #dadce0;
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
}
input:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}
.login-btn {
width: 100%;
padding: 0.8rem;
background-color: #1a73e8;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #1557b0;
}
.error-message {
color: #d93025;
text-align: center;
margin-top: 1rem;
display: none;
}
</style>
</head>
<body>
<div class="login-container">
<h2 class="login-title">账户登录</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">登录</button>
<div class="error-message" id="errorMsg">用户名或密码错误</div>
</form>
</div>
<script>
// 获取表单元素
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const errorMsg = document.getElementById('errorMsg');
// 为表单添加提交事件监听
loginForm.addEventListener('submit', function(e) {
// 阻止表单默认提交行为
e.preventDefault();
// 获取输入的用户名和密码
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
// 简单的验证逻辑（实际项目中会发送到后端验证）
if (username === 'admin' && password === '123456') {
// 登录成功，跳转到首页或其他页面
alert('登录成功！');
// 实际应用中可以使用 window.location.href = '首页地址';
} else {
// 登录失败，显示错误信息
errorMsg.style.display = 'block';
// 3秒后隐藏错误信息
setTimeout(() => {
errorMsg.style.display = 'none';
}, 3000);
}
});
</script>
</body>
</html>各标签含义解释：
<!DOCTYPE html>：声明文档类型为 HTML5，告诉浏览器使用 HTML5 标准解析页面。<html lang="zh-CN">：HTML 文档的根元素，lang="zh-CN"表示页面主要语言为简体中文。<head>：包含文档的元数据（不直接显示在页面上的信息）。<meta charset="UTF-8">：指定页面字符编码为 UTF-8，支持中文等多种字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：用于响应式设计，确保在移动设备上正确显示页面。<title>：定义页面标题，显示在浏览器标签页上。<style>：包含 CSS 样式代码，用于美化页面元素。
<body>：包含页面的所有可见内容。<div>：通用容器元素，用于分组其他 HTML 元素，便于样式设计和布局。这里的login-container类用于包裹整个登录表单。<h2>：二级标题标签，用于显示 "账户登录" 这样的标题文字。<form id="loginForm">：表单元素，用于收集用户输入。id属性用于在 JavaScript 中获取该元素。<label for="username">：标签元素，与表单控件关联。for属性的值与对应输入框的id一致，点击标签会聚焦到对应的输入框。<input>：输入框元素，用于接收用户输入：type="text"：文本输入框，用于输入用户名。type="password"：密码输入框，输入的内容会被隐藏（显示为圆点或星号）。id属性：唯一标识该输入框，用于与 label 关联和 JavaScript 操作。name属性：表单提交时的参数名。required属性：表示该字段为必填项，提交表单时如果未填写会提示用户。
<button type="submit">：提交按钮，点击会触发表单的提交事件。type="submit"表示这是一个提交按钮。<script>：包含 JavaScript 代码，用于实现交互逻辑，这里处理表单提交事件和登录验证。
JavaScript 部分说明：
- 通过
document.getElementById()获取表单和输入框元素。 - 使用
addEventListener('submit', ...)为表单添加提交事件监听。 e.preventDefault()阻止表单默认的提交行为（避免页面刷新）。- 简单的登录验证逻辑：当用户名是 "admin" 且密码是 "123456" 时提示登录成功，否则显示错误信息。
- 错误信息会在 3 秒后自动隐藏（通过
setTimeout实现）。