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

【问题标题】：Where are the form elements allowed within a table element?表格元素中允许的表单元素在哪里？
【发布时间】：2013-01-12 16:09:45
【问题描述】：

我想在列标题上方创建一个带有搜索文本框的表格

<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" /> 可以放在表单标签之间的任何位置吗？

【问题讨论】：

标签： html

【解决方案1】：

这是html5的规范，你会发现只允许表格嵌入表格here

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

如果链接被丢弃，则从该链接复制以下内容以保留答案：

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

<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>

你也可以在表单标签的任何地方使用隐藏输入。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您应该将整个<table> 元素包裹在<form> 中，除了<th>、<td> 和<caption> 元素之外，您不能将任何与表格无关的内容放入<table> 中。因此，如果您不想将整个表格放在<td> 单元格中，则应将整个表格包装在<form> 中。

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

【讨论】：