IE10 表单标签问题答案

【问题标题】：IE10 issue with form tagIE10 表单标签问题
【发布时间】：2013-04-10 08:19:54
【问题描述】：

我在 html 中有 div

<div id="test"></div>

如果我这样做了

$('#test').html(' <form method="GET" action="whatever"> <input type="text"/> </form>')

在 IE 10 中我会得到

<div id="test">
 <input type="text">           

</div>

在 Firefox 或 IE 8 中我会得到

<div id="test">
<form action="whatever" method="GET">
 <input type="text">
</form>

你能帮我解决一下 IE10 吗？ (jquery 1.7.2)

在 div test 周围还有一个 form 标签。

【问题讨论】：

你试过用 append() 代替 html() 有什么效果吗？
现在，我把 html('') 然后 append() 这样我就可以得到 html 功能了
现在一切正常吗？
发布您的问题的解决方案并将其标记为答案，这样它也可以帮助其他人
It is invalid to nest forms.

标签： internet-explorer-10

【解决方案1】：

您在问题的结尾表示您正在尝试将一种形式嵌套在另一种形式中。请查看the specification 了解表单元素的内容模型：

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

嵌套表单元素是无效的。这可能是 Internet Explorer 10 试图保护您免受可能无法在所有浏览器中正常工作的无效标记的原因。最新版本的 Google Chrome 似乎也删除了无效的子表单。

如果您需要从另一个表单内部提交一个表单，请改用按钮上的form attribute。这将告诉他们他们要提交哪个表单，而不一定是他们当前所处的表单。

4.10.18.3 控件和表单的关联
默认情况下，与表单关联的元素与其最近的祖先表单元素相关联（如下所述），但可以指定一个表单属性来覆盖它。

注意：此功能允许作者解决对嵌套表单元素缺乏支持的问题。

所以你可以有以下：

<form id="one">
    <!-- This button submits #two -->
    <input type="submit" form="two">
</form>
<form id="two">
    <!-- This button submits #one -->
    <input type="submit" form="one">
</form>

【讨论】：

支持这个答案，因为它更具前瞻性。实施非标准标记有更高的机会让浏览器从你下面拉出地毯。

【解决方案2】：

尝试使用.html() 附加具有 HTML 功能的表单，然后使用 .append() 推送表单中的每个元素，这样你就有了类似的东西：

$('#test').html('<form method="GET" action="whatever"></form>');
$('form [action="whatever"]').append('<input type="text"/>'); // Note for selector will be better to use ID for the form

【讨论】：