HTML登录注册输入框无法输入内容问题求助

你的输入框无法输入主要是两个核心问题：元素遮挡和重复ID，和form、div容器本身无关，以下是具体修复步骤：

1. 移除遮挡输入框的元素 #

你的#label元素使用了position: relative; top:73px; left:35%;，导致这个元素直接覆盖在输入框区域上方，用户点击时实际触发的是#label而非输入框。修改CSS中的#label样式，避免遮挡：

#label {
    /* 移除导致遮挡的定位属性 */
    /* top: 73px; left: 35%; */
    margin-top: .7rem;
    font-weight: bold;
    padding-top: .9rem;
    font-size: 18px;
    text-align: center; /* 让标签居中，和输入框对齐 */
}

如果需要标签和输入框左右排列，推荐使用Flex布局重构结构：

.form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
}

2. 修正重复的ID #

HTML中ID必须唯一，你在两个表单里重复使用了id="email"和id="password"，这会导致DOM选择器异常，干扰输入框交互。修改为唯一ID：

<!-- 登录表单的输入框 -->
<input name="email" type="email" id="login-email"><br>
<input type="password" id="login-password"><br><br>

<!-- 注册表单的输入框 -->
<input name="email" type="email" id="register-email"><br>
<input type="password" id="register-password"><br>

3. 移除错误的form禁用设置 #

你代码中document.getElementById("forma").setAttribute("disabled", false);是错误用法：form元素的disabled是布尔属性，设置setAttribute("disabled", false)不会移除禁用状态，反而会因为属性存在保持禁用。直接删除这行代码即可，表单默认处于启用状态。

若需动态控制表单禁用，应使用DOM属性：

document.getElementById("forma").disabled = false; // 启用表单
document.getElementById("forma").disabled = true; // 禁用表单

完整修改后的代码示例 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <img src="logo.jpg" style="height: 75px; width: 75px;" id="logo">
        <div id="menu">
            <nav>
                <a href="index.html">Home|</a>
                <a href="math-facts.html">Games|</a>
                <a href="about.html">About|</a>
                <a href="login.html">Login</a>
            </nav>
        </div>
    </header>

    <form id="forma">
        <h2>Log in</h2>
        <div class="form-group">
            <div>Email:</div>
            <input name="email" type="email" id="login-email">
        </div>
        <div class="form-group">
            <div>Password:</div>
            <input type="password" id="login-password">
        </div>
        <div class="form-group">
            <input type="submit" value="Log in" id="sublogin">
        </div>
        <p id="register">Need an account? Register</p>
    </form>

    <form id="formb">
        <h2>Register</h2>
        <div class="form-group">
            <div>Email:</div>
            <input name="email" type="email" id="register-email">
        </div>
        <div class="form-group">
            <div>Password:</div>
            <input type="password" id="register-password">
        </div>
        <div class="form-group">
            <div>Repeat Password:</div>
            <input type="password" id="password2" name="password2">
        </div>
        <div class="form-group">
            <input type="checkbox" id="over"><label for="over">I am over 13 and like playing games.</label>
        </div>
        <div class="form-group">
            <input type="submit" value="Register" id="subregister">
        </div>
        <p id="account">Have an account? Log in</p>
    </form>

    <footer>
        <hr>
        <div id="footer-menu">
            <nav>
                <a href="contact-us.html"><img src="icon-contact-us.png"></a>
                <a href="https://instagram.com"><img src="icon-instagram.png"></a>
                <a href="https://twitter.com"><img src="icon-twitter.png"></a>
                <a href="https://facebook.com"><img src="icon-facebook.png"></a>
            </nav>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

CSS #

#menu,
#footer-menu {
    text-align: center;
}

nav {
    margin: auto;
    line-height: 60px;
}

header {
    margin: -8px;
    position: sticky;
    top: 0;
    height: 75px;
    background-color: antiquewhite;
}

a {
    margin: auto;
    text-decoration: none;
    font-size: 24px;
    color: black;
}

footer {
    position: absolute;
    bottom: 0;
    height: 75px;
    width: 100%;
    background-color: antiquewhite;
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

input {
    margin: .1rem;
}

h2 {
    text-align: center;
}

#register {
    text-align: center;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

input[type=submit] {
    width: 75px;
    height: 25px;
    background-color: green;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

#account {
    text-align: center;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

#logo {
    float: left;
}

JavaScript #

window.addEventListener("load", function () { 
    document.getElementById("formb").style.display = "none";
});

const register = document.getElementById("register");
register.addEventListener("click", function () {
    document.getElementById("forma").style.display = "none";
    document.getElementById("formb").style.display = "block";
});

const account = document.getElementById("account");
account.addEventListener("click", function () {
    document.getElementById("formb").style.display = "none";
    document.getElementById("forma").style.display = "block";
});

const sublogin = document.getElementById("sublogin");
sublogin.addEventListener("click", function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    alert("Form submitted");
});

const subregister = document.getElementById("subregister");
subregister.addEventListener("click", function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    alert("Form submitted");
});

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