你能嵌套html表格吗？-Java 学习之路

391

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

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

这两种形式都有效吗？我的朋友有这个问题， subForm 工作的一部分，而另一部分没有 .

19 回答

0
在嵌套表单之前使用空表单标记

经过测试和使用Firefox，Chrome

没有在I.E.上测试过
```
<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>
```
回复于 2024-04-28T21:24:47+08:00
11

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

来自html5 working draft：

4.10.3表单元素内容模型：流内容，但没有表单元素后代 .

回复于 2024-04-28T21:24:47+08:00

第二种形式将被忽略，例如，请参阅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;
}

回复于 2024-04-28T21:24:47+08:00

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

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

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

Scenario ：
- input_Form1_n1
- input_Form2_n1
- input_Form1_n2
- input_Form2_n2
Implementation ：
```
<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你'll find browser'兼容性 .
回复于 2024-04-28T21:24:47+08:00
2
您还可以在按钮标记内使用formaction =“” .
```
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
```
这将作为单独的按钮嵌套在原始形式中 .
回复于 2024-04-28T21:24:47+08:00
413
普通的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();
```
回复于 2024-04-28T21:24:47+08:00
-1

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

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

回复于 2024-04-28T21:24:47+08:00
-1

正如克雷格所说，没有 .

但是，关于你对以下原因的评论：

使用输入和"Update"按钮可能更容易使用1 <form> ，并使用另一个 <form> 中的"Submit Order"按钮复制隐藏输入 .

回复于 2024-04-28T21:24:47+08:00

解决这个问题的另一种方法是，如果你使用一些允许你操作发布数据的服务器端脚本语言，就是声明你的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现在只有你的“主表单”数据，你的子表单数据存储在你可以随意操作的另一个变量中 .

希望这可以帮助！

回复于 2024-04-28T21:24:47+08:00

84

请注意，您不能嵌套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对"This feature allows authors to work around the lack of support for nested form elements."的评论，但是没有引用指定的地方，我认为他们假设我们应该假设它是在html3规范中指定的:)

回复于 2024-04-28T21:24:47+08:00
2

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

回复于 2024-04-28T21:24:47+08:00
53

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

回复于 2024-04-28T21:24:47+08:00
2

您甚至可能会遇到使其在同一浏览器的不同版本中工作的问题 . 所以避免使用它 .

回复于 2024-04-28T21:24:47+08:00
41
虽然我没有提供嵌套表单的解决方案（它不能可靠地工作），但我确实提出了一个适用于我的解决方法：

使用场景：允许一次更改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>
```
好吧，所以没有太多的发明，但它确实起了作用 .
回复于 2024-04-28T21:24:47+08:00
1
关于嵌套表单：一天下午我花了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 .

当我移动生成的ajaxContainer时form_1 <i>outside</i> ，我重新开始营业 . 它回答了为什么人们可能会嵌套表格的问题 . 我的意思是，真的，如果不定义使用哪种形式，ID是什么？必须有一个更好，更光滑的工作 .
回复于 2024-04-28T21:24:47+08:00

虽然问题很老，但我同意@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>
      

    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      


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

JS FIDDLE LINK

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

回复于 2024-04-28T21:24:47+08:00

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

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

我相信这会有所帮助 .

回复于 2024-04-28T21:24:47+08:00

-1

在我知道我不应该这样做之前，我有嵌套表单，目的是有多个提交按钮 . 跑了18个月，成千上万的注册交易，没有人打电话给我们任何困难 .

嵌套表单为我提供了一个ID来解析正确的操作 . 没有打破'直到我试图将一个字段附加到其中一个按钮和Validate抱怨 . 解开它并不是什么大问题 - 我在外部表单上使用了明确的字符串化，因此提交和表单不匹配无关紧要 . 是的，是的，应该把按钮从提交到onclick .

关键是有些情况并没有完全打破 . 但“并非完全破碎”的标准可能太低了以下:-)

回复于 2024-04-28T21:24:47+08:00
1

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

回复于 2024-04-28T21:24:47+08:00

你能嵌套html表格吗？

19 回答

相关问题