如何处理单个表中的多个 <form> 并验证 HTML答案

【问题标题】：How to handle multiple <form>s in a single table and have HTML validate如何处理单个表中的多个 <form> 并验证 HTML
【发布时间】：2015-01-24 01:37:55
【问题描述】：

问题——似乎我不能将两个表单嵌入到一个表中并验证我的 HTML。例如，W3 Validator 给了我Element <form> not allowed as child of element <tr> in this context. 我看不到解决验证错误的方法。

我想要实现的是：

在 html 表“行”中，我可以更改一些输入值，然后使用行末尾的“保存”按钮来保存它们
如果我必须删除一行，我可以通过按 Delete 按钮来完成。
在 UI 方面，我觉得有两种表单很有意义，每行一个用于保存/删除按钮。
我可以有几行，每行都有自己的保存/删除按钮

用户界面示例

数字是输入字段，保存/删除是按钮。

下面是我简化的不符合要求的 HTML：

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<table>

<tr>
    <form>
    <td><input type="text" name="row_id" value="1"></td>
    <td><input type="text" name="five" value="5"></td>
    <td><input type="text" name="three" value="3"></td>
    <td><input type="submit" value="Save This Row"></td>
    </form>

    <td><form>
            <input type="text" name="row_id" value="1">
            <input type="submit" value="Delete This Row">
    </form></td>
</tr>
</table>

</body>
</html>

HTML 的工作令人惊讶，但它不验证。我正在寻找一种既能工作又能验证的解决方案。

【问题讨论】：

标签： html forms html-table html-validation

【解决方案1】：

您可以使用form attribute 并将您的表单/输入放在您喜欢的任何地方。

form 一个字符串，指定与输入关联的元素（即其表单所有者）。此字符串的值（如果存在）必须与同一文档中元素的 id 匹配。如果未指定此属性，则元素与最近的包含表单相关联（如果有）。

form 属性允许您在文档中的任何位置放置输入，但可以将其包含在文档中其他位置的表单中。

例子：

<form action="/save" method="PATCH" id="patch"></form>
<form action="/delete" method="DELETE" id="delete"></form>

<table>
  <tbody>
    <tr>
      <td><input form="patch" name="row_id" value="1"></td>
      <td><input form="patch" name="five" value="5"></td>
      <td><input form="patch" name="three" value="3"></td>
      <td><input form="patch" type="submit" value="Save This Row"></td>
      <td>
        <input form="delete" name="row_id" value="1">
        <input form="delete" type="submit" value="Delete This Row">
      </td>
    </tr>
  </tbody>
</table>

您还可以利用提交按钮上的formaction 和formmethod 属性来获得更动态的表单

【讨论】：

【解决方案2】：

我知道这是一篇旧帖子，但只是在寻找其他内容时遇到了这个问题。这个问题的另一个解决方案，3 年后现在可用，它发布文本框数组，以及您希望保存或删除的行的 ID。

类似于：

<form>
  <table>
    <tr>
      <td><input type="text" name="row_id[1]" value="1"></td>
      <td><input type="text" name="five[1]" value="5"></td>
      <td><input type="text" name="three[1]" value="3"></td>
      <td>
        <button name="action" type="submit" value="delete_1">Delete</button>
        <button name="action" type="submit" value="save_1">Save</button>
      </td>
    </tr>
    <tr>
      <td><input type="text" name="row_id[2]" value="2"></td>
      <td><input type="text" name="five[2]" value="7"></td>
      <td><input type="text" name="three[2]" value="10"></td>
      <td>
        <button name="action" type="submit" value="delete_2">Delete</button>
        <button name="action" type="submit" value="save_2">Save</button>
      </td>
    </tr>
  </table>
</form>

您当然可以根据需要多次重复表格中的行。每个都有一个唯一的 ID，它包含在操作按钮值以及输入字段数组中。因此，例如，如果您单击第二行上的 Delete 按钮，您将在服务器端收到一个 ACTION 值“delete_2”。然后快速拆分、分解或类似的操作会给你一个 ACTION 和一个 ID。

对于保存功能，您可以使用此 ID 从相关数组中调用相关文本字段。

此方法允许您将整个表格嵌入到一个表单中。

顺便说一句，由于 DELETE 函数可能不需要使用任何其他变量，因为这些变量很少会在一次动作中更新然后删除，因此您可以使用简单的 URL 来实现相同的目标，并且ID 的 GET 参数。不过要小心，因为您可以允许您的用户删除多条记录，只需更改 URL 变量并一遍又一遍地调用页面。

希望这对某人有所帮助，我再次意识到这是一篇旧帖子。

【讨论】：

【解决方案3】：

要在@Jukka 的列表中再添加一个选项：

与 #2 一样，将整个表格放在一个表单中，但添加两个额外的表单（在表格之外），只有隐藏字段（一个用于保存，一个用于删除）。大表单上的按钮不会提交该表单。相反，他们将使用该行中的值填充隐藏的表单字段，然后提交隐藏的表单。这需要一些 JavaScript，但与选项 #2 不同，不需要进行服务器端更改。

【讨论】：

【解决方案4】：

您有多种选择：

保持您的代码不变。这是无效的，但它有效。在未来的某些浏览器中它可能会失败，但这不太可能。
重新组织代码，使所有字段都在一个表单中，并将整个表格放在该表单中。这可能需要对服务器端表单处理程序进行更改，也可能需要对 HTML 进行更改。
重新组织它，使您有一个两列的表，第一列包含包含内部单行表的表单。这要求您明确设置内部表格的列宽，以使整体看起来像一张表格。
将“保存”按钮放在表单中（单元格内），并通过带有form 属性的input 按钮引用这些表单。这样，每个表单都将位于一个单元格内，并且它将与具有这些属性的外部 input 元素连接。这将是最干净的解决方案，但 IE 不支持 form 属性。

【讨论】：