为何表单required属性仅FirstName生效？其余必填字段无提交提示

问题根源：代码中的语法拼写错误 #

• 标签拼写错误：First name、Last name、Email对应的标签被误写成<iabel>，浏览器无法识别错误标签，导致关联的input字段原生校验逻辑异常。
• radio标签语法错误：Half Marathon对应的input标签存在引号混乱（id="Half value=" half"），属于无效语法，破坏了表单结构，导致后续字段校验被中断。
• meta标签语法错误：viewport属性中width=<device-width>多了尖括号，应为width=device-width，虽不直接影响校验，但不符合规范。
• 额外问题：赛事选择的radio组未设置必填，若需强制用户选择赛事，需补充校验逻辑。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Form</title>
</head>

<body>
    <h1>Race Registration!</h1>
    <form action="/race_registration">
        <p>
            <label for="first">First name</label>
            <input type="text" id="first" name="firstname" required>
            <label for="last">Last name</label>
            <input type="text" id="last" name="lastname" required>
        </p>
        <p>
            <label for="select-race">Select a Race:</label>
        </p>
        <p>
            <input type="radio" name="race" id="FunRun" value="fun run" required>
            <label for="FunRun">Fun Run 5k</label>
        </p>
        <p>
            <input type="radio" name="race" id="Half" value="half">
            <label for="Half">Half Marathon</label>
        </p>
        <p>
            <input type="radio" name="race" id="Full" value="full">
            <label for="Full">Full Marathon</label>
        </p>
        <p>
            <label for="email">Email</label>
            <input type="email" name="email" id="email" required>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" required>
        </p>
        <p>
            <label for="division">Select Age Group</label>
            <select name="division" id="division">
                <option value="kids">Under 18</option>
                <option value="ya">18-30</option>
                <option value="adults">30-50</option>
                <option value="senior">50+</option>
            </select>
        </p>
        <button>Register</button>
    </form>
</body>

</html>

修复说明 #

1. 修正所有<iabel>为标准<label>，确保input与标签正确关联，原生必填校验可正常触发。
2. 修复Half Marathon的radio标签语法错误，恢复表单结构完整性。
3. 修正viewport的meta标签，符合HTML规范。
4. 给赛事选择的radio组添加required（添加到任意一个radio上即可），强制用户选择赛事。
5. 调整部分id命名（如Fun Run改为FunRun），避免id中出现空格，符合HTML属性命名规范。

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