HTML代码怎么实现登录界面_HTML代码登录界面设计与表单验证技巧

<form id="loginForm" action="/login" method="post">
    <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名" required minlength="4">
    </div>
    <div>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" required minlength="6">
    </div>
    <button type="submit">登录</button>
    <!-- 也可以添加一个“忘记密码”链接或者“记住我”的复选框 -->
    <div class="options">
        <input type="checkbox" id="rememberMe" name="rememberMe">
        <label for="rememberMe">记住我</label>
        <a href="/forgot-password">忘记密码？</a>
    </div>
</form>

/* 示例CSS，用于基本布局 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px; /* 限制表单最大宽度 */
    box-sizing: border-box;
}

form div {
    margin-bottom: 15px;
}

label {
    display: block; /* 让标签独占一行 */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

input[type="text"],
input[type="password"] {
    width: calc(100% - 20px); /* 减去内边距 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* 确保padding和border不增加宽度 */
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;
}

.options a {
    color: #007bff;
    text-decoration: none;
}

.options a:hover {
    text-decoration: underline;
}

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');

    loginForm.addEventListener('submit', function(event) {
        let isValid = true;
        let errorMessage = '';

        // 清除之前的错误提示
        clearErrorMessages();

        if (usernameInput.value.trim() === '') {
            isValid = false;
            errorMessage += '用户名不能为空。<br>';
            showError(usernameInput, '用户名不能为空');
        } else if (usernameInput.value.trim().length < 4) {
            isValid = false;
            errorMessage += '用户名至少需要4个字符。<br>';
            showError(usernameInput, '用户名至少需要4个字符');
        }

        if (passwordInput.value.trim() === '') {
            isValid = false;
            errorMessage += '密码不能为空。<br>';
            showError(passwordInput, '密码不能为空');
        } else if (passwordInput.value.trim().length < 6) {
            isValid = false;
            errorMessage += '密码至少需要6个字符。<br>';
            showError(passwordInput, '密码至少需要6个字符');
        }
        // 更多复杂的密码正则验证可以在这里添加

        if (!isValid) {
            event.preventDefault(); // 阻止表单提交
            // 可以在这里显示一个总的错误提示，或者让每个输入框旁边显示错误
            // alert(errorMessage); // 简单粗暴的提示
        }
    });

    // 辅助函数：显示错误信息
    function showError(inputElement, message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.style.color = 'red';
        errorDiv.style.fontSize = '0.9em';
        errorDiv.textContent = message;
        inputElement.parentNode.appendChild(errorDiv);
        inputElement.style.borderColor = 'red'; // 标记错误输入框
    }

    // 辅助函数：清除错误信息
    function clearErrorMessages() {
        document.querySelectorAll('.error-message').forEach(el => el.remove());
        document.querySelectorAll('input').forEach(input => input.style.borderColor = '');
    }

    // 实时验证，用户输入时就给出反馈
    usernameInput.addEventListener('input', function() {
        // 可以在这里做一些简单的实时验证，例如判断是否为空
        // 复杂的验证通常在提交时进行，避免频繁提示打扰用户
    });
});

<!-- 示例：集成Google reCAPTCHA v3 -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
<script>
  grecaptcha.ready(function() {
      grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY', {action: 'login'}).then(function(token) {
         // 将 token 发送到后端进行验证
         document.getElementById('recaptchaToken').value = token;
      });
  });
</script>
<input type="hidden" id="recaptchaToken" name="recaptchaToken">