HTML代码怎么实现登录界面与表单验证

来源：IPIPP.com作者：头衔：全栈工程师
导读：本期聚焦于小伙伴创作的《HTML代码怎么实现登录界面与表单验证》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《HTML代码怎么实现登录界面与表单验证》有用，将其分享出去将是对创作者最好的鼓励。

登录界面是前端开发中最常见的功能模块之一，很多新手刚开始学习时都会遇到不知道如何下手的问题，下面我们就从零开始讲解HTML代码实现登录界面与表单验证的完整流程。

HTML代码怎么实现登录界面与表单验证

一、登录界面的基础HTML结构搭建

登录界面的核心是使用HTML的<form>标签构建表单，内部添加对应的输入项和按钮。我们首先需要确定登录界面需要包含的元素：用户名输入框、密码输入框、记住我复选框、登录提交按钮，最后再加上一个简单的提示区域用于显示验证结果。

下面是基础结构的代码示例：

<!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>
        /* 后续补充样式 */
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form id="loginForm">
            <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>
            <div class="form-group remember">
                <input type="checkbox" id="remember" name="remember">
                <label for="remember">记住我</label>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <div id="message" class="message"></div>
    </div>
    <script>
        // 后续补充验证逻辑
    </script>
</body>
</html>

二、使用CSS美化登录界面

基础结构搭建完成后，界面会比较简陋，我们可以通过CSS调整布局、颜色、间距等，让登录界面更美观。这里我们采用居中布局，给表单容器添加边框和阴影，调整输入框和按钮的样式。

把下面这段CSS代码补充到之前HTML的<style>标签内部：

.login-container {
    width: 400px;
    margin: 100px auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
}
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: #409eff;
    outline: none;
}
.remember {
    display: flex;
    align-items: center;
}
.remember input {
    margin-right: 8px;
}
.login-btn {
    width: 100%;
    height: 42px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.login-btn:hover {
    background-color: #337ecc;
}
.message {
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    height: 20px;
}
.message.error {
    color: #f56c6c;
}
.message.success {
    color: #67c23a;
}

三、表单验证逻辑实现

界面美化完成后，我们需要实现表单验证功能，在用户点击登录按钮时，检查输入是否符合要求，避免空提交或者不符合规则的输入。这里我们使用JavaScript监听表单的提交事件，在提交前执行校验逻辑。

把下面这段JS代码补充到之前HTML的<script>标签内部：

// 获取表单和提示元素
const loginForm = document.getElementById('loginForm');
const messageEl = document.getElementById('message');

// 监听表单提交事件
loginForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 清空之前的提示信息
    messageEl.textContent = '';
    messageEl.className = 'message';

    // 获取输入值
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value.trim();

    // 校验用户名
    if (!username) {
        showMessage('用户名不能为空', 'error');
        return;
    }
    if (username.length < 3 || username.length > 16) {
        showMessage('用户名长度需要在3-16位之间', 'error');
        return;
    }

    // 校验密码
    if (!password) {
        showMessage('密码不能为空', 'error');
        return;
    }
    if (password.length < 6) {
        showMessage('密码长度不能少于6位', 'error');
        return;
    }

    // 验证通过的处理
    showMessage('登录验证通过，可提交到后端接口', 'success');
    // 这里可以添加实际提交表单到后端的逻辑
    // const formData = new FormData(loginForm);
    // fetch('https://ipipp.com/api/login', { method: 'POST', body: formData })
});

// 显示提示信息的函数
function showMessage(text, type) {
    messageEl.textContent = text;
    messageEl.classList.add(type);
}

四、常见问题说明

在实际开发中，还有一些需要注意的点：

  • 这里的验证只是前端基础验证，实际项目中密码需要加密传输，且后端必须再做一次完整的校验，不能只依赖前端验证。
  • 如果需要更复杂的验证规则，比如用户名只能包含字母数字，可以扩展正则表达式进行判断。
  • 记住我功能需要结合后端设置cookie或者localStorage实现，前端验证部分只是提供了勾选的交互，实际存储逻辑需要和后端配合。

五、完整可运行代码

下面是整合了所有结构的完整代码，可直接复制到HTML文件中运行查看效果：

<!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>
        .login-container {
            width: 400px;
            margin: 100px auto;
            padding: 30px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .login-container h2 {
            text-align: center;
            margin-bottom: 25px;
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }
        .form-group input[type="text"],
        .form-group input[type="password"] {
            width: 100%;
            height: 40px;
            padding: 0 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .form-group input[type="text"]:focus,
        .form-group input[type="password"]:focus {
            border-color: #409eff;
            outline: none;
        }
        .remember {
            display: flex;
            align-items: center;
        }
        .remember input {
            margin-right: 8px;
        }
        .login-btn {
            width: 100%;
            height: 42px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .login-btn:hover {
            background-color: #337ecc;
        }
        .message {
            margin-top: 15px;
            text-align: center;
            font-size: 14px;
            height: 20px;
        }
        .message.error {
            color: #f56c6c;
        }
        .message.success {
            color: #67c23a;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>用户登录</h2>
        <form id="loginForm">
            <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>
            <div class="form-group remember">
                <input type="checkbox" id="remember" name="remember">
                <label for="remember">记住我</label>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <div id="message" class="message"></div>
    </div>
    <script>
        const loginForm = document.getElementById('loginForm');
        const messageEl = document.getElementById('message');

        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            messageEl.textContent = '';
            messageEl.className = 'message';

            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            if (!username) {
                showMessage('用户名不能为空', 'error');
                return;
            }
            if (username.length < 3 || username.length > 16) {
                showMessage('用户名长度需要在3-16位之间', 'error');
                return;
            }

            if (!password) {
                showMessage('密码不能为空', 'error');
                return;
            }
            if (password.length < 6) {
                showMessage('密码长度不能少于6位', 'error');
                return;
            }

            showMessage('登录验证通过，可提交到后端接口', 'success');
        });

        function showMessage(text, type) {
            messageEl.textContent = text;
            messageEl.classList.add(type);
        }
    </script>
</body>
</html>

HTMLform_validationCSSJavaScript修改时间：2026-05-25 10:49:09

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。

上一篇HTML视频如何实现画中画模式

下一篇HTML外部样式表怎么引入？一文搞懂HTML外部CSS样式引入方法

猜你喜欢

内容垂直聚焦
专注技术核心技术栏目，确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计，为用户提供无干扰的纯技术知识沉淀，精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。前端、网络、数据库、服务器、建站、系统层层递进，构建清晰学习路径，帮助用户系统化掌握网站开发与运维所需的核心技术栈。
深度技术解析
拒绝泛泛而谈，深入技术细节与实践难点。无论是数据库优化还是服务器配置，均结合真实场景与代码示例进行剖析，致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端逻辑，从数据库操作到服务器运维，形成完整闭环，一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性，步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目，显著缩短从学习到实践的距离，快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代，紧跟主流技术发展趋势，为用户提供经久不衰的学习价值。

站长平台 - 负责任网站 - 免责声明 - 隐私政策

举报邮箱：chomcom@qq.com

Copyright (C) www.ipipp.com All Rights Reserved.