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

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

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


当前回答

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

来自html5工作草案:

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

其他回答

HTML5 <input>表单属性可以是解决方案。 从http://www.w3schools.com/tags/att_input_form.asp:

表单属性是HTML5中的新属性。 指定<input>元素属于哪个<form>元素。此属性的值必须是同一文档中<form>元素的id属性。

场景:

input_Form1_n1 input_Form2_n1 input_Form1_n2 input_Form2_n2

实现:

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

在这里你可以找到浏览器的兼容性。

即使您可以让它在一个浏览器中工作,也不能保证它在所有浏览器中都能正常工作。所以虽然你可能能让它在某些时候工作,但你肯定不能让它在所有时候都工作。

关于嵌套表单:我花了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是什么?肯定有更好、更圆滑的办法。

虽然这个问题已经很老了,而且我同意@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/

在嵌套表单之前使用空表单标签

在Firefox, Chrome上测试和工作

未测试I.E.

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

EDIT by @adusza:正如评论者指出的那样,上面的代码不会产生嵌套表单。然而,如果你像下面这样添加div元素,你将在mainForm中有subForm,并且第一个空白表单将被删除。

<form name="mainForm" action="mainAction">
  <div>
      <form></form>
      <form name="subForm"  action="subAction">
      </form>
  </div>
</form>