第一种形式的嵌套表单标签不响应 CSS 显示：无答案

【问题标题】：First form of nested form tags not responding to css display:none第一种形式的嵌套表单标签不响应 CSS 显示：无
【发布时间】：2013-08-29 20:30:35
【问题描述】：

我有这样的嵌套表单标签

<form>
    <h5>Main Form</h5>
    <input type="text" />

    <!-- Don't Show This Form -->
    <form style="display:none">
        <input type="text" />
        <input type="text" />
    </form>

    <!-- Don't Show This Form -->
    <form style="display:none">
        <input type="text" />
        <input type="text" />
    </form>

</form>

问题是第一个表单显示虽然它没有显示 css inline

查看代码http://jsfiddle.net/fZMKB/

我知道我知道，嵌套表单是违反规则的，但出于这个原因，我必须以这种方式使用它

我需要在 jQuery 事件之前重置一堆 输入和表单元素，我正在使用此代码

    $('form').get(0).reset();

从我之前的问题How to reset forms elements (input,select,textarea,etc.) on events using jQuery

所以我使用表单标签的唯一原因是我需要重置输入和文本区域等。

【问题讨论】：

你不能有嵌套的表单标签。
“我知道我知道，嵌套表单是违反规则的”——是的，但它不起作用，所以换一种方式。
Can I nest form tags in other form tags? 的可能副本
@jim 我喜欢你的想法。但不幸的是你不能嵌套form
谢谢@RakeshJuyal，我发现这个stackoverflow.com/questions/680241/… 来重置我的表单元素而不是$('form').get(0).reset();

标签： javascript jquery html css forms

【解决方案1】：

不，嵌套表单是被禁止的。

这在 HTML 4.01 DTD 中表示为：

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

——http://www.w3.org/TR/html4/interact/forms.html#h-17.3

一个 FORM 有一个强制性的开始标签，强制性的结束标签，并且可以包含 %block 或 SCRIPT 中的任何内容，但其他 FORM 除外。

XML DTD 不像 SGML DTD 那样具有表现力，因此在 XHTML 中，该规则仅在规范的人类可读文本中指定：

表单不得包含其他表单元素。

——http://www.w3.org/TR/xhtml1/#prohibitions

HTML 5 不是 SGML 应用程序，并且没有该语言的官方机器可读描述。它也在文字中表达了这个规则：

内容模型：

流式内容，但没有表单元素后代。

——http://www.w3.org/TR/html5/forms.html#the-form-element

Reference

【讨论】：

你建议用什么解决方案来绕过它？？

【解决方案2】：

嵌套表单从来都不是很好的理由。相反，使用正确的 HTML 语法并相应地调整您的 jQuery 代码。下面是一些有效的 HTML 标记：

HTML

<form>
  <h5>Main Form</h5>
  <input type="text">
  <div class="one" style="display:none">
    <input type="text">
    <input type="text">
  </div>
  <div class="two" style="display:none">
    <input type="text">
    <input type="text">
  </div>
</form>

假设您要重置第一小节中的所有文本输入、复选框、单选按钮和选择菜单。这只需要两行简单的 jQuery：

$(".one input, .one select").val("");
$(".one textarea").html("");

如果要恢复默认值，应使用data 属性将值存储在 HTML 标记中。这是一个例子：http://jsfiddle.net/pgNrF/3/

【讨论】：

不幸的是，我需要使用 $('form').get(0).reset(); 以任何方式重置其中的任何输入以使用此 stackoverflow.com/questions/18364393/…
为什么还存在内部形式？它们会单独提交到服务器上的不同端点吗？如果没有，您可以摆脱它们。
我使用输入和 textareas 和其他表单元素从用户那里收集条目并使用 javascript 重用以生成更大的内容，最后我将其发送到服务器，有时我需要重置这些表单元素
编程需要遵守一套严格的规则。当你偏离规则时，就会发生意想不到的事情。除了reset()，还有其他方法可以清除表单字段。例如，您可以使用$("input").val("")。先修正语法，再解决问题。
我必须回到重置步骤 :(，所以任何关于重置输入和文本区域、收音机、复选框和选项（下拉菜单）的有效方法的建议？谢谢你的时间 :)

【解决方案3】：

HTML 中不能有嵌套的表单，可以有不同的表单但不能嵌套

看到这个http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element

Content model
Flow content, but with no form element descendants.

【讨论】：