表格元素中允许的表单元素在哪里

Question

我想创建一个表格，在列标题上方带有搜索文本框，如下所示

<table>
   <thead>
      <tr><td><input type="text" /></td><td><input type="text" /></td></tr>
      <tr><td>Mother</td><td>Father</td></tr>
   </thead>
   <tbody id="search-results">
      <!-- to be populated by AJAX response -->
   </tbody>
</table>

表单元素是否允许这样做？

<form>
  <thead>...</thead>
</form>

或

<thead>
  <form>...</form>
</thead>

还是哪种方式？

另外，<input type="hidden" />可以绝对放置在表单标签之间的任何位置吗？

Answer 1

你应该

把整个<table>元素包装在<form>中，你不能把任何与表无关的东西放在<table>里面，除了<th>、<td>和<caption>元素。因此，如果您不想将整个表单放在<td>单元格中，则应将整个表包装在 <form> 中。

<input type="hidden">标签就像任何其他输入标签一样 - 它们必须包装在<td>和其他内容标签中。

Answer 2

在

表格内部，<form>只能是内容进入表格内的地方，即内容在<td>、<thead>、<tfoot>、<th>或<caption>内。 或者整个表格可以在<form>内，但不能显示它的任何一种方式。

如果您不使用内置表单提交功能，您还可以在任何<td>中使用表单元素（如 <input> 标记或其他表单元素），而无需将它们包含在<form>中。

Answer 3

这是 html5 的规范，你会发现这里只允许嵌入到表中的表单

这是使用 thead 的正确形式：thead 教程。

以下内容是从该链接复制的，以便在链接被丢弃时保留答案：

如果你

愿意，你可以像这样离开你的桌子，但是如果你 欣赏高度语义结构化的内容，我很高兴 向您介绍该元素。元素 在表格中构建标题，这会告诉浏览器什么 例如，每列包含。该元素结构所有 内容，以便浏览器知道实际内容的内容是什么 表是。使用与之前相同的示例，和 元素是这样用的：

<table border="1" width="100%">
        <thead>
                <tr>
                        <td>Row 1, cell 1</td>
                        <td>Row 1, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td>Row 2, cell 1</td>
                        <td>Row 2, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
                <tr>
                        <td>Row 3, cell 1</td>
                        <td>Row 3, cell 2</td>
                        <td>Row 3, cell 3</td>
                </tr>
                <tr>
                        <td>Row 4, cell 1</td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                </tr>
        </tbody>
</table>

您也可以在表单标记中的任何位置使用隐藏输入。