避免表格中的嵌套表格答案

【问题标题】：Avoid nested forms in table避免表格中的嵌套表格
【发布时间】：2011-01-15 19:07:47
【问题描述】：

如何创建以下有效的 (x)HTML，其中复选框和单选按钮（第 3 和 4 列）和保存按钮都是一个大表单的一部分，所有删除按钮（最后一列）都是它们的提交按钮拥有单独的表单（有一个带有区域设置 ID 的隐藏字段），而不使用 javascript？

language | region | active | default |
-----------------------------------------------
en       | GB     | [x]    | (*)     | X delete
nl       | NL     | [x]    | ( )     | X delete
nl       | BE     | [x]    | ( )     | X delete

[save]

使用表格，我最终不得不嵌套表格，这当然是无效的。所以，我想知道，我还有什么其他的可能性。也许是浮动列？

【问题讨论】：

标签： html forms nested-forms

【解决方案1】：

您可以使用单个表单。利用按下按钮的名称-值对也将作为请求参数发送的事实。在填充 HTML 表单期间，在按钮名称中动态内联语言环境 ID。

<input type="submit" name="delete_1" value="Delete" />
<input type="submit" name="delete_2" value="Delete" />
<input type="submit" name="delete_3" value="Delete" />

然后在服务器端检查是否有任何一个被按下（伪/Java风格）：

for (Locale locale : locales) {
    if (request.getParameter("delete_" + locale.getId()) != null) {
        // Delete button is pressed for this locale.
    }
}

【讨论】：

谢谢，确实有这种可能。但是，正如我对@Oded 所评论的那样，我试图避免单点入口操作，因为我宁愿将我的 MVC 控制器方法分开。但也许我还是会用这个。因为我的其他选择也很理想。

【解决方案2】：

您可以使用两个不同的表格 - 一个带有用于复选框、单选按钮和保存按钮的单一表单，第二个带有删除按钮和隐藏字段。

只需使用 CSS 将它们彼此重新定位。

【讨论】：

是的，确实有这种可能。虽然我不太喜欢语义，但说实话。
@fireeyedboy - 从语义上讲，所有表单元素都属于一个表单...这是另一种选择，尽管您最终会提交所有信息以进行一次删除。
是的，这也是一种可能。但是作为 MVC 应用程序的一部分，我希望表单映射到它们在控制器中的相应操作。 :-/ 如果没有 javascript，我将不得不路由到单点入口操作，我宁愿不这样做。
@fireeyedboy - 您可以始终使用链接而不是按钮来执行删除操作。使用 CSS，您可以让它们看起来像按钮。