跨 div 表格？它有效吗？答案

【问题标题】：Cross-div forms? is it valid?跨 div 表格？它有效吗？
【发布时间】：2012-09-19 23:06:56
【问题描述】：

基本上由于一些 javascript/css 规则，我不能只将这两个 div 包装在一个表单标记中并完成它。

所以，我想知道下面的 html 是否被认为是有效的？

<div id="tab1">
    <form>
        <input type="text" name="whatever" />
</div>

<div id="tab2">
        <input type="submit" value="Submit" />
    </form>
</div>

【问题讨论】：

没有。但更重要的是，问题是：你为什么想要这样做？
@DavidThomas stackoverflow.com/questions/12503966/…
在 tab1 中，隐藏的输入与 tab2 中的输入匹配（反之亦然），每个选项卡都有单独的表单，事件监听（on）提交并填写隐藏的输入。
@xception 看看你的答案，它只有一个<form>，而不是两个，你没有为每个标签匹配/隐藏<inputs>，你打错了 click 事件，这与 submit 不同，是不同的。我也评论而不是回答，因为它是在回复之前的 cmets，而不是回答“它有效吗？”。

标签： html forms html-validation

【解决方案1】：

没有。这不是有效的 HTML/XML。

更糟糕的是，它会被解析为：

<div id="tab1">
    <form>
        <input type="text" name="whatever" />
    </form> <!-- form will be closed here, because parent is being closed -->
</div>

<div id="tab2">
        <input type="submit" value="Submit" />
    </form> <!--  not sure about what happens with this one, but it will be either removed or replaced with empty <form></form> element -->
</div>

【讨论】：

嗯，该死的，这让它变得更加困难，愚蠢的推特引导程序！
你所说的解析只是部分正确。在这种情况下的 HTML 解析真的很奇怪。实际上，在解析器创建的 DOM 中，表单元素只包含文本输入框。提交按钮是 tab2 div 的直接子元素。但是关闭表单标签并没有被简单地丢弃。它标志着表单的结束，因此提交按钮，因为它在它之前，仍然与表单相关联。这意味着单击按钮将使用提供的“whatever”参数提交表单。

【解决方案2】：

在此介绍：http://www.impressivewebs.com/dom-improperly-nested/

它是无效的 XML/XHTML，但 HTML5 会更宽容。显示/结构可能不一致，因此应彻底测试。许多浏览器现在会自动“纠正”这种格式。在任何情况下都最好避免。

【讨论】：