HTML5中如何用class或重复id关联多个表单到同一提交按钮？

HTML5的form属性仅支持绑定单个表单ID，无法通过class关联多个表单，而且页面中绝对不能重复使用同一个ID（这是HTML基础规范，重复ID会导致DOM选择器行为异常）。

由于你的需求只是验证所有复选框是否勾选、不需要提交表单数据，完全可以用JavaScript替代原生表单提交逻辑，实现更灵活的验证：

修正后的HTML结构 #

<!-- 表单1：使用唯一ID -->
<form id="form1">
    Checkbox: <input type='checkbox' class="required-checkbox" name='test' required>
</form>

<!-- 表单2：使用唯一ID -->
<form id="form2">
    Checkbox: <input type='checkbox' class="required-checkbox" name='test2' required>
</form>

<!-- 提交按钮：无需绑定form属性，改用JS处理点击事件 -->
<button type="button" id="submit-btn">Submit example</button>

JavaScript验证逻辑 #

document.getElementById('submit-btn').addEventListener('click', function() {
    // 获取所有需要验证的复选框
    const checkboxes = document.querySelectorAll('.required-checkbox');
    let allChecked = true;

    // 遍历检查每个复选框状态
    checkboxes.forEach(checkbox => {
        if (!checkbox.checked) {
            allChecked = false;
            // 给未勾选的复选框添加视觉提示
            checkbox.style.outline = '2px solid red';
        } else {
            checkbox.style.outline = '';
        }
    });

    // 验证通过则跳转页面，否则提示用户
    if (allChecked) {
        // 替换为目标页面的URL
        window.location.href = '/next-page.html';
    } else {
        alert('请勾选所有免责声明复选框');
    }
});

可选：保留原生表单验证提示 #

如果想使用浏览器原生的required提示样式，可通过触发表单自身的验证逻辑实现：

document.getElementById('submit-btn').addEventListener('click', function() {
    let allValid = true;
    // 遍历所有表单，触发原生验证
    document.querySelectorAll('form').forEach(form => {
        if (!form.checkValidity()) {
            form.reportValidity();
            allValid = false;
        }
    });

    if (allValid) {
        window.location.href = '/next-page.html';
    }
});

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