在表格行中添加表单

Question

如何在表格行中添加表单？

我有以下情况：

<table>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
</table>

如何添加表单元素并保持HTML的有效性？

<table>
  <form>
    <tr>
      <td><input type="text" name="q"></td>
      <td><input type="text" name="a"></td>
      <td><input type="submit" name="submit" value="Submit"></td>
    </tr>
  </form>
</table>

无效的（至少我认为是这样）

- PeeHaa

Answer 1

将您的表格放在表单元素中：

<form action="/" name="form1">
  <table>...</table>
</form>

但更好的方法是：如果可能的话，不要使用表格来构建您的表单。

- Mario Uher

---

为什么我不想要使用表格来展示表格数据？ - PeeHaa

在您的特定示例中，将表格包装在表单中是可以的。另一方面，您可能会丢失信息或使用户感到困惑，因为如果他们一次输入多行数据，则这些数据将丢失！ - Mario Uher

我已经设置了一个演示页面，以展示您的问题：http://tableinsideform.heroku.com/。 - Mario Uher

Answer 2

HTML中的表格和表单是不同的概念。人们有时会混淆这两个概念。这种概念上的混淆通常伴随着混乱的标记。另一方面，可以在某种程度上“混合”表格和表单。具体来说，您可以将一个表格放到一个表单中，反之亦然，这样做通常很有用。但您需要了解自己在做什么。

表格和表单可以相互嵌套。但如果您将表单放入表格中，则每个表单必须完全包含在单个表格单元格中（在实践中为一个TD元素）。因此，表单各自独立。

据我所知，使用表格来格式化表单是有效的。

- Igor Hrcek

---

抱歉，问题的格式出错了。根据问题中的表格，我的选择有哪些？ - PeeHaa

首先，HTML 代码无效，因为您没有关闭 <input> 标签。应该像这样：<input type="text" name="q" />。您是在问在哪里放置 <form> 标签，还是可以在单个表格内有多个 <form> 元素？应该将 <form> 标签放在表格外面。 - Igor Hrcek

@Igor - 这不是XHTML。斜杠不是必需的（在HTML 4中甚至是错误的）。 - Quentin

@Igor：HTML 不需要自闭合标签。 - PeeHaa

Answer 3

    <form action="/" name="form1">
<table>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
</table>

    </form>

或者

    <table>
    <tr>
        <td colspan="2">  <form action="/" name="form1"></td>
    </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
<tr><td colspan="2">  </form></td></tr>

......

</table>

- AlexC

---

每一行都需要一个新的<input type="submit" name="submit" value="Submit">吗？ - AlexC