Question

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

我想要实现的目标是：

在html表格中＆＃34; row＆＃34;我有并且可以更改一些输入值，然后使用我的＆＃34; Save＆＃34;行末的按钮，保存它们
如果我必须删除一行，我可以按删除按钮。
UI-wise对我来说有意义的是每行有两个表单，每个表单用于保存/删除按钮。
我可以有多行，每行都有自己的保存/删除按钮

示例用户界面

数字是输入字段，保存/删除是按钮。 enter image description here

我在下面简化的不合规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工作令人惊讶，但它没有验证。我正在寻求一个解决方案，它同时做到了 - 工作和验证。

Answer 1

您有几种选择：

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

Answer 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，它包含在操作按钮值中，以及输入字段数组中。因此，例如，如果您单击第二行上的“删除”按钮，您将收到＆＃34;删除_＆＃34;在服务器端。快速拆分，爆炸或类似会给你一个动作和一个ID。

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

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

作为一个侧点，因为DELETE函数可能不需要使用任何其他变量，因为这些变量很少会被更新，然后在一个动作中删除，您可以通过简单的URL实现相同的目标，以及ID的GET参数。但请注意，因为您可以允许用户删除多个记录，只需更改URL变量，然后反复调用页面。

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

Answer 3

您可以使用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属性来获得更动态的表单

Answer 4

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

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

如何在单个表中处理多个<form>并进行HTML验证</form>

4 个答案: