Question

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

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

这两种形式都有效吗？我的朋友遇到了这个问题，这是subForm作品的一部分，而另一部分却没有。

Answer 1

总之，没有。您可以在页面中包含多个表单，但不应嵌套它们。

来自html5 working draft：

4.10.3 form元素

内容模型：

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

Answer 2

第二种形式将被忽略，例如，请参阅WebKit中的snippet：

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

Answer 3

我遇到了类似的问题，我知道这不是问题的答案，但对于遇到这类问题的人来说，这可能会有所帮助：
如果需要将两个或多个表单的元素放在给定的序列中， HTML5 <input> form属性可以是解决方案。

来自http://www.w3schools.com/tags/att_input_form.asp：

表单属性是HTML5中的新功能。

指定<form>元素属于哪个<input>元素。此属性的值必须是同一文档中<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" />

Here你会发现浏览器的兼容性。

Answer 4

普通的HTML不允许你这样做。但是使用javascript你可以做到这一点。如果您使用的是javascript / jquery，则可以使用类对表单元素进行分类，然后使用serialize（）仅序列化要提交的项目子集的表单元素。

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

然后在你的javascript中你可以这样做来序列化class1元素

$(".class1").serialize();

对于class2，你可以做到

$(".class2").serialize();

整个表格

$("#formid").serialize();

或只是

$("#formid").submit();

Answer 5

如果您正在使用AngularJS，<form>内的任何ng-app标记都会在运行时被替换为设计为嵌套的ngForm指令。

在Angular形式中可以嵌套。这意味着当所有子表单都有效时，外部表单也是有效的。但是，浏览器不允许嵌套<form>元素，因此Angular提供ngForm指令，其行为与<form>相同，但可以嵌套。这允许您使用嵌套表单，这在使用ngRepeat指令动态生成的表单中使用Angular验证指令时非常有用。（source）

Answer 6

正如克雷格所说，没有。

但是，关于为什么：

的评论

使用输入和“更新”按钮可能更容易使用1 <form>，并使用另一个<form>中的“提交订单”按钮复制隐藏输入。

Answer 7

解决此问题的另一种方法是，如果您使用的某些服务器端脚本语言允许您操作发布的数据，则声明您的html表单如下：

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

如果您打印发布的数据（我将在这里使用PHP），您将获得如下数组：

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

然后你可以做类似的事情：

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

你的$ _POST现在只有你的“主表单”数据，你的子表单数据存储在你可以随意操作的另一个变量中。

希望这有帮助！

Answer 8

请注意，您不能嵌套FORM元素！

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9（html4规范没有注意到从3.2到4的嵌套形式没有变化）

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12（html4规范没有注意到从4.0到4.1的嵌套形式没有变化）

https://www.w3.org/TR/html5-diff/（html5规范没有注意到嵌套形式从4到5没有变化）

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms评论“此功能允许作者解决对嵌套表单元素缺乏支持的问题。”，但不引用指定的位置，我认为他们假设我们应该假设它已指定在html3规范中：）

Answer 9

由于是2019年，我想对这个问题给出更新的答案。可以实现与嵌套表单相同的结果，但无需嵌套它们。 HTML5引入了form属性。您可以在表单外部的表单控件中添加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不再是浏览器，而是一种兼容性工具，这一点已得到Microsoft本身的确认：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规范：

此功能使作者可以解决缺少以下方面的支持嵌套的表单元素。

Answer 10

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

Answer 11

在同一浏览器的不同版本中，它甚至会出现问题。所以请避免使用它。

Answer 12

即使您可以在一个浏览器中使用它，也不能保证它在所有浏览器中都能正常工作。因此，虽然您可能能够让它在某些的时间内工作，但您肯定无法让它在所有的时间内工作。

Answer 13

虽然我没有提供嵌套表单的解决方案（它不能可靠地工作），但我确实提出了一个适合我的解决方法：

使用场景：允许一次更改N个项目的超级表单。它底部有一个“全部提交”按钮。每个项目都希望拥有自己的嵌套表单，并带有“提交项目#N”按钮。但不能......

在这种情况下，实际上可以使用单个表单，然后将按钮的名称设为submit_1 .. submit_N和submitAll并将其处理为服务器端，如果按钮的名称为_1，则仅查看以submit_1结尾的参数。

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

好的，所以没有太多的发明，但它确实有效。

Answer 14

您还可以在button标记内使用formaction =“”。

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

这将以原始形式嵌套为单独的按钮。

Answer 15

关于嵌套表单：我花了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经常无法说出无效的表单_2。

当我移动生成form_1的{2} <i>outside</i>的ajaxContainer时，我又回来了。它回答了为什么人们可以嵌套表格的问题。我的意思是，真的，如果不定义使用哪种形式，ID是什么？必须有一个更好，更光滑的工作。

Answer 16

在嵌套表单

之前使用空表单标记

经过测试并使用过Firefox，Chrome

未在I.E。

上测试

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

Answer 17

虽然这个问题很老，但我同意@everyone在HTML中不允许嵌套表格

但是这件事可能都想看到这个

你可以破解（我称之为黑客，因为我确定这是合法的）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 FIDDLE LINK

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

Answer 18

真的不可能... 我无法嵌套表单标签... 但是我使用了这段代码：

{% csrf_token %}

包含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 } } });和其他内容

并应用了一些JS

@RunWith(SpringRunner.class)
@SpringBootTest
public class GCGoodControllerTest 
{
    @Test
    public void getAllGoodsRequest()
    {
        RestTemplate restTemplate = new RestTemplate();
        Object test = restTemplate.getForObject("http://localhost:8888/gc/goods/getAll", Object.class);
    }
}

Answer 19

今天，我也遇到了同样的问题，解决了我添加了用户控件的问题在这个控件上我使用这个代码

<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);
    }

我相信这会有所帮助。

Answer 20

在我不应该执行此操作之前，我已经嵌套了表单以实现多个提交按钮。以这种方式运行了18个月，完成了数千笔注册交易，没有人给我们打电话带来任何困难。

嵌套表格给了我一个ID，以解析要采取的正确操作。直到我尝试将一个字段附加到其中一个按钮上，Validate都抱怨了，才打破。解开它没什么大不了的-我在外部表单上使用了显式字符串化，因此提交和表单不匹配无关紧要。是的，应该把按钮从提交到onclick上。

在某些情况下它并没有完全损坏。但是“不完全坏掉”可能太低了，无法拍摄：-）

你能嵌套html表格吗？

20 个答案: