网站登录界面JS代码报错求助：9处错误修正无效，求优化方案

我想要为网站创建一个登录界面，目前使用JavaScript编写了相关代码，但代码存在9处错误，自行修正无果。现附上代码及错误列表，希望能获得错误修复及代码优化的帮助：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/quiz.css" />
</head>
<body>
// Create the login form
const form = document.createElement('form');
form.method = 'post';
form.action = '/login';

// Create the username input field
const usernameInput = document.createElement('input');
usernameInput.type = 'text';
usernameInput.name = 'username';
usernameInput.placeholder = 'Username';
form.appendChild(usernameInput);

// Create the password input field
const passwordInput = document.createElement('input');
passwordInput.type = 'password';
passwordInput.name = 'password';
passwordInput.placeholder = 'Password';
form.appendChild(passwordInput);

// Create the submit button
const submitButton = document.createElement('button');
submitButton.type = 'submit';
submitButton.innerText = 'Login';
form.appendChild(submitButton);

// Add the form to the page
document.body.appendChild(form);

// Handle the form submission
form.addEventListener('submit', event => {
    event.preventDefault();</body>


    // Get the username and password
    const username = usernameInput.value;
    const password = passwordInput.value;

    // Store the login information in local storage
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);

    // Redirect the user to the homepage
    window.location.href = '/home';
});

<div id="divid">Next</div>
    <script type="text/javascript" src="js/quiz.js"></script>

</body>
</html>

错误列表 #

• 期望表达式。第1行第1列
• 期望分号。第1行第11列
• JSX元素'meta'没有对应的闭合标签。第4行第6列
• 意外的标记。是否想写>或>？第38行第40列
• 期望}。第39行第27列
• 意外的标记。是否想写}或}？第52行第1列
• 期望对应JSX的html闭合标签。第57行第3列
• 期望声明或语句。第58行第1列
• 期望表达式。第58行第1列

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="css/quiz.css" />
</head>
<body>
    <div id="divid">Next</div>
    <script>
        // 创建登录表单
        const form = document.createElement('form');
        form.method = 'post';
        form.action = '/login';

        // 创建用户名输入框
        const usernameInput = document.createElement('input');
        usernameInput.type = 'text';
        usernameInput.name = 'username';
        usernameInput.placeholder = 'Username';
        form.appendChild(usernameInput);

        // 创建密码输入框
        const passwordInput = document.createElement('input');
        passwordInput.type = 'password';
        passwordInput.name = 'password';
        passwordInput.placeholder = 'Password';
        form.appendChild(passwordInput);

        // 创建提交按钮
        const submitButton = document.createElement('button');
        submitButton.type = 'submit';
        submitButton.innerText = 'Login';
        form.appendChild(submitButton);

        // 将表单添加到页面
        document.body.appendChild(form);

        // 处理表单提交
        form.addEventListener('submit', event => {
            event.preventDefault();

            // 获取用户名和密码（去除首尾空格）
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();

            // 非空验证
            if (!username || !password) {
                alert('请输入完整的用户名和密码');
                return;
            }

            // 注意：绝对不要将密码存储到localStorage，此处仅为示例修正
            localStorage.setItem('username', username);
            // localStorage.setItem('password', password); // 该代码已移除，密码存储本地存在严重安全风险

            // 跳转到首页
            window.location.href = '/home';
        });
    </script>
    <script type="text/javascript" src="js/quiz.js"></script>
</body>
</html>

错误修复说明 #

1. JS代码未包裹在script标签内：原代码直接在body中写JS语句，浏览器会将其解析为HTML文本，引发语法错误，现已将所有JS代码放入<script>标签。
2. 错误提前闭合body标签：原代码在event.preventDefault();后错误插入</body>，打断JS逻辑，已删除该错误标签。
3. HTML标签规范修正：
   • 将<head lang="en">改为<html lang="en">，lang属性应归属html标签。
   • 修正meta标签的解析问题（原错误为JSX解析混乱导致，实际是JS代码混在HTML中引发的解析错误）。
4. 事件监听函数语法修正：确保箭头函数完整闭合，修复了缺少}的语法错误。
5. DOM元素位置调整：将<div id="divid">Next</div>移到script标签前，避免JS执行时的DOM顺序问题。

优化建议 #

• 输入验证：增加了用户名和密码的非空验证，提升用户体验。
• 安全优化：移除了存储密码到localStorage的代码，密码属于敏感信息，绝对不能存储在本地。
• 输入处理：添加trim()去除输入内容的首尾空格，避免无效的空白输入。
• 语义化优化：给title标签添加内容，符合网页语义化要求。

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