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

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

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


当前回答

在我知道我不应该这样做之前,我已经为拥有多个提交按钮而嵌套了表单。这样运行了18个月,数千个注册交易,没有人打电话给我们任何困难。

嵌套表单为我提供了一个ID来解析要采取的正确操作。直到我试图将一个字段附加到其中一个按钮和验证抱怨,才打破。不是一个大问题来解决它-我使用了一个显式的stringify在外部的形式,所以它没有关系提交和形式不匹配。是的,是的,应该把按钮从submit变成onclick。

关键是在某些情况下,它并没有完全被破坏。但“没有完全崩溃”可能是一个太低的标准:-)

其他回答

一个简单的解决方法是使用iframe来保存“嵌套”表单。 从视觉上看,表单是嵌套的,但在代码方面,它在一个单独的html文件中。

关于嵌套表单:我花了10年的时间调试一个ajax脚本。

对不起,我之前的回答/例子没有说明HTML标记。

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)'>
  <td id='ajaxContainer'></td>
</form>

Form_2不断失败,表示无效的Form_2。

当我把产生form_2 < I >的ajaxContainer移到form_1的</ I >外时,我又回到了业务中。它回答了为什么会嵌套形式的问题。我的意思是,如果不定义要使用哪种表单,ID是什么?肯定有更好、更圆滑的办法。

(参见thecode . .代码格式如下]2 .简单的技巧 简单地不要在另一个表单标签里面使用其他的元素,请使用相同的元素而不使用表单标签。

参见下面的例子 ""不使用另一种形式//只是召回输入图像描述元素在这里""

虽然这个问题已经很老了,而且我同意@everyone的观点,HTML中不允许嵌套表单

但这个东西大家可能都想看看

在那里你可以hack(我称之为黑客,因为我确定这不是合法的)html允许浏览器有嵌套的形式

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

Js小提琴link

http://jsfiddle.net/nzkEw/10/

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

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规范:

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