是否可以像这样嵌套html表单

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

两种形式都适用吗?我的朋友有这个问题,subForm的一部分工作,而另一部分不工作。


当前回答

真的不可能…… 我不能嵌套表单标签… 但是我使用了下面的代码:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

{% csrf_token %}之类的

并应用了一些JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

其他回答

总之,没有。一个页面中可以有多个表单,但它们不应该嵌套。

来自html5工作草案:

4.10.3 form元素 内容模型: 流内容,但没有表单元素后代。

可以实现与嵌套表单相同的结果,但不需要嵌套它们。

HTML5引入了表单属性。可以将form属性添加到窗体外部的窗体控件,以便将它们链接到特定的窗体元素(通过id)。

https://www.impressivewebs.com/html5-form-attribute/

这样你可以像这样构造你的html:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

所有现代浏览器都支持form属性。虽然IE不支持这个功能,但IE不再是浏览器,而是一个兼容工具,微软自己也证实了这一点:https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/。是时候停止关心如何在IE中工作了。

https://caniuse.com/#feat=form-attribute https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

来自html规范:

该特性允许作者解决缺乏支持的问题 嵌套表单元素。

不,你不能有嵌套的表单。相反,您可以打开一个包含表单的Modal并执行Ajax表单提交。

今天,我也遇到了同样的问题,为了解决这个问题我增加了一个用户控件和 在这个控件上,我使用这个代码

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

并在页面的PreRenderComplete事件中调用此方法

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

我相信这会有帮助。

你也可以在按钮标签内使用formaction=""。

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

这将作为一个单独的按钮嵌套在原始表单中。