Question

在我现有的网页布局中，涉及多个文件，一个指定高级布局，有两个元素，一个用于左列，另一个用于右列。

我想要一个逻辑<form>（只有一个操作），其中<input>元素分布在左列和右列。执行此操作的唯一方法是将元素作为<div>的父级（并重构我的布局代码），或者是否可以在两个div中执行<form [something]>之类的操作，以便单击“提交”一个表单提交两个表单的所有输入？

Answer 1

提交这两种表单的唯一方法是将<div>包装在一个<form>标记内。或者，您可以使用jQuery / JavaScript聚合数据并将它们作为一个提交一起提交。

Answer 2

我认为人们错过了这个问题。 <form>可以包含它需要的任何元素。如果页面布局如下：

<body>
    <div id="leftColumn"><input name="foo" type="text"></div>
    <div id="rightColumn"><input name="bar" type="text"></div>
<body>

您不需要单独的foo和bar表单。您可以愉快地将<div>个<form>内容包含在单个<body> <form name="onlyOneForm"> <div id="leftColumn"><input name="foo" type="text"></div> <div id="rightColumn"><input name="bar" type="text"></div> </form> <body>元素中：

{{1}}

Answer 3

（很抱歉不接受答案并发布我自己的答案，但我发现显然我得到的答案与HTML5不及时了！）

HTML5为form=元素[1]引入了<input>属性。这样你就可以做<input form="form1" name="input1" /> and have it in a nested inner form, or even outside of the`元素。

[1] http://www.w3.org/TR/html5/association-of-controls-and-forms.html#attr-fae-form

Answer 4

简短回答是否，您不能将两个单独的form标记用作1表单，而是将整个内容包装在包装div标记中

<form>
  <!-- some content with input elements has no relation with other form tag on this page, it just ends where you specify the end tag -->
</form>

<form>
  <!-- Has  no relation with the first form -->
</form>

你可以在多个<div> s？</div> </form>中分成一个逻辑<form>

4 个答案: