登录表单记住我按钮功能求助：点击OK创建Cookie保存账号信息

问题说明 #

使用基础HTML、CSS和JavaScript制作登录表单，需要为「记住我」复选框添加功能：点击OK按钮时，若勾选「记住我」，则创建Cookie保存用户名（Student Id/Name）。原代码未实现该功能，需完成JavaScript逻辑修复与功能添加。

修正后的完整代码 #

HTML + JavaScript 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div class="f1">
        <form>
            <label for="uname">
                <b>Username</b>
            </label>
            <input type="text"
                placeholder="Enter Username"
                id="user"
                name="uname" required>
            <span id="username" class="text-danger font-weight-bold"></span>
            
            <label for="psw">
                <b>Password</b>
            </label>
            <input type="password"
                placeholder="Enter Password"
                id="pass"
                name="psw" required>
            
            <button type="button" onclick="handleLogin()">OK</button>
            <button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
            
            <input type="checkbox" id="rememberMe"> 
            <label for="rememberMe">Remember me</label>
        </form>
    </div>

    <script>
        // 页面加载时读取Cookie填充用户名
        window.onload = function() {
            const savedUsername = getCookie('username');
            if (savedUsername) {
                document.getElementById('user').value = savedUsername;
                document.getElementById('rememberMe').checked = true;
            }
        };

        // 处理登录逻辑
        function handleLogin() {
            const username = document.getElementById('user').value;
            const password = document.getElementById('pass').value;
            const rememberMe = document.getElementById('rememberMe').checked;

            // 简单验证（可根据需求扩展）
            if (!username || !password) {
                alert('请填写用户名和密码');
                return;
            }

            // 如果勾选记住我，设置Cookie（有效期7天）
            if (rememberMe) {
                setCookie('username', username, 7);
            } else {
                // 清除Cookie
                setCookie('username', '', -1);
            }

            // 跳转到首页
            alert('Login is clicked');
            window.location.assign("Home.html");
        }

        // 设置Cookie的工具函数
        function setCookie(name, value, days) {
            let expires = "";
            if (days) {
                const date = new Date();
                date.setTime(date.getTime() + (days*24*60*60*1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "")  + expires + "; path=/";
        }

        // 获取Cookie的工具函数
        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for(let i=0;i < ca.length;i++) {
                let c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }
    </script>
</body>
</html>

CSS 代码 #

form{
    border: 3px solid black;
    padding: 20px;
    max-width: 400px;
    margin: 20px auto;
    background: rgba(0,0,0,0.7);
}
input[type=text],
input[type=password]{
    width:100%;
    padding:12px 20px;
    margin:8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
button{
    background-color: #04aa6d;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
    display: inline-block;
    width: auto;
    margin-right: 8px;
}
body {
    background-image: url('cool.jpg');
    background-size: cover;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
}

关键修改说明 #

• 修复HTML语法错误：补全<!DOCTYPE html>声明，修正required拼写错误，闭合<form>标签，密码输入框改为type="password"增强安全性。
• 重构登录逻辑：将OK按钮的点击事件替换为自定义handleLogin()函数，统一处理表单验证、Cookie操作和页面跳转。
• Cookie工具函数：实现setCookie()和getCookie()工具函数，支持设置Cookie有效期，方便管理用户信息。
• 自动填充功能：页面加载时读取Cookie，自动填充已保存的用户名并勾选「记住我」复选框。
• 优化CSS体验：调整表单布局、背景透明度和按钮悬停效果，提升页面美观度和可用性。

内容的提问来源于stack exchange，提问作者Abdullah Waseem