示例 1：最基础的静态登录页面

这个版本不包含任何功能,纯粹是页面的 HTML 和 CSS 样式，它适合用来学习页面的基本结构。

简单的html网页登录编码
（图片来源网络，侵删）

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">登录页面</title>
    <style>
        /* 基础样式重置 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        /* 登录框样式 */
        .login-container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 350px;
        }
        /* 标题样式 */
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        /* 表单元素通用样式 */
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* 确保 padding 不会影响宽度 */
        }
        /* 按钮样式 */
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form action="#" method="post">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
</body>
</html>

代码解释

  1. <!DOCTYPE html>: 声明这是一个 HTML5 文档。
  2. <head>: 包含页面的元数据。
    • <meta charset="UTF-8">: 确保浏览器能正确显示中文等特殊字符。
    • <title>: 浏览器标签页上显示的标题。
    • <style>: 内部 CSS 样式表，我们用它来美化页面。
      • body: 设置整个页面的背景色、字体，并使用 flexbox 布局将登录框居中。
      • .login-container: 登录框的样式，包括白色背景、内边距、圆角和阴影，使其看起来像一个卡片。
      • input[type="text"], input[type="password"]: 为所有输入框设置通用样式，确保它们占满容器宽度。
      • button: 设置登录按钮的样式。
  3. <body>: 包含页面的可见内容。
    • <div class="login-container">: 一个用于包裹所有登录元素的容器，方便我们通过 CSS 对其整体进行样式控制。
    • <form>: 表单元素。
      • action="#": 当用户点击提交按钮时，表单数据会被发送到 （表示当前页面），在实际应用中，这里应该是一个服务器处理登录的 URL，action="/login"。
      • method="post": 指定使用 HTTP POST 方法提交数据，POST 方法比 GET 方法更安全，因为它不会将密码等信息显示在 URL 或服务器日志中。
    • <div class="form-group">: 每个输入项的容器，用于结构化管理。
    • <label for="username">: 标签。for 属性与输入框的 id 属性关联，点击标签时可以自动聚焦到对应的输入框，提升了用户体验。
    • <input>: 输入框。
      • type="text": 文本输入框。
      • type="password": 密码输入框，输入的内容会显示为圆点或星号。
      • id="username": 唯一的标识符，供 <label> 的 for 属性使用。
      • name="username": 当表单提交时，数据会以 username=用户输入的值 的形式发送给服务器。name 属性至关重要，没有它，服务器将无法接收数据。
      • required: HTML5 的验证属性，要求用户必须填写此字段。
    • <button type="submit">: 提交按钮，当用户点击它时，它会触发表单的 action 和 method 中定义的行为。

示例 2：增加简单客户端验证

这个版本在第一个示例的基础上,增加了简单的 JavaScript 验证，比如检查用户名和密码是否为空。

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">登录页面 (带验证)</title>
    <style>
        /* 样式与示例1基本相同，增加错误信息样式 */
        body, .login-container, h2, .form-group, label, input, button {
            /* 样式同上，为简洁省略 */
        }
        .error-message {
            color: red;
            font-size: 14px;
            margin-top: 5px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <!-- 添加一个错误信息显示区域 -->
        <div id="error-container" class="error-message"></div>
        <form id="loginForm" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
    <script>
        function validateForm() {
            // 获取输入框的值
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorContainer = document.getElementById('error-container');
            // 清空之前的错误信息
            errorContainer.textContent = '';
            errorContainer.style.display = 'none';
            // 验证用户名是否为空
            if (username.trim() === '') {
                showError('用户名不能为空！');
                return false; // 阻止表单提交
            }
            // 验证密码是否为空
            if (password.trim() === '') {
                showError('密码不能为空！');
                return false; // 阻止表单提交
            }
            // 如果所有验证都通过，可以继续提交（这里模拟提交）
            // alert('登录成功！');
            // 在实际应用中，你会在这里发送AJAX请求或让表单正常提交
            return true; // 允许表单提交
        }
        function showError(message) {
            const errorContainer = document.getElementById('error-container');
            errorContainer.textContent = message;
            errorContainer.style.display = 'block';
        }
    </script>
</body>
</html>

新增/修改部分解释

  1. HTML 修改:

    • 添加了一个 <div id="error-container"> 用于显示错误信息。
    • 给 <form> 添加了 onsubmit="return validateForm()"，当表单提交时，会调用 validateForm 这个 JavaScript 函数，函数返回 true 则提交，返回 false 则阻止提交。
    • 移除了输入框上的 required 属性，因为我们将用 JavaScript 来进行验证，这样可以自定义错误提示。

  2. CSS 新增:

    • .error-message: 为错误信息添加了红色文字和默认隐藏的样式。

  3. JavaScript 新增 (<script> 标签内):

    简单的html网页登录编码
    （图片来源网络，侵删）
    • validateForm() 函数: 这是核心验证逻辑。
      • 通过 document.getElementById() 获取用户名和密码输入框的值。
      • 检查值是否为空（使用 .trim() 去除前后空格）。
      • 如果为空,调用 showError() 函数显示错误信息，并 return false 阻止表单提交。
      • 如果所有检查都通过,return true 允许表单提交。
    • showError(message) 函数: 一个辅助函数，用于接收错误信息并将其显示在页面上。

总结与重要提示

  • 这只是前端: 这两个例子都只处理了前端的展示和验证，它们不能真正实现登录功能，真正的登录需要后端服务器（如用 Node.js, Python, Java, PHP 等语言编写）来接收用户名和密码，然后在数据库中进行比对，验证成功后返回一个“凭证”（如 Session 或 Token）。
  • 安全性: 前端验证只是为了提升用户体验和减轻服务器负担，绝不能替代后端的安全验证，因为前端代码可以被用户轻易地绕过或修改。
  • 密码传输: 在实际生产环境中，网站必须使用 HTTPS (SSL/TLS 加密) 协议，以确保用户名和密码在传输过程中不会被窃听。

希望这些示例和解释对您有帮助！

简单的html网页登录编码
（图片来源网络，侵删）