在 table header 中放置表单时表单位置无效

Question

我正在（成功地）使用 HTML table 的 header 作为表格。此表单用于过滤下面的 table 行并且效果很好。这是一个例子：

<table class="tableMedium">
    <tr>
        <form name="fiterRoles" action="<c:url value="/roles/filteredList" />" method="POST">
            <th>Name<br/>
                <input type="text" id="nameFilter" name="nameFilter" value="${nameFilter}" placeholder="Search" onchange="this.form.submit()" style="width: 100%;"/>
            </th>
            <th>Description<br/>
                <input type="text" name="descriptionFilter" value="${descriptionFilter}" placeholder="Search" onchange="this.form.submit()" style="width: 100%;"/>
            </th>
            <th width="${hasEditRights eq true ? '22%' : '6%'}">Controls<br/>
                <a class="buttonLink" href="<c:url value='/roles/list' />" title="Reset Filters">
                    <img src="${cp}/resources/images/resetFilters.png" height="20" width="20"/>
                </a>
                <c:choose>
                    <c:when test="${hasEditRights eq true}">
                        <a class="buttonLink" href="<c:url value='/roles/newRole' />" title="Add Role">
                            <img src="${cp}/resources/images/addIcon.png" height="20" width="20"/>
                        </a>
                    </c:when>
                </c:choose>
            </th>
        </form>
    </tr>
</table>

唯一的问题是 Eclipse 一直告诉我这是一个无效的表单位置。该页面运行良好，但似乎 HTML5 不允许这样做。我在 copy-pasted 示例中注意到 table 没有 <thead> 标签，但其他使用 header-form 相同样式的人有它，Eclipse 仍然不满意。我曾尝试将 <form> 标签移到所述 <thead> 标签之外，但没有成功。

除了在 Eclipse 中禁用警告之外，我可以做些什么来使这段代码生效？

Answer 1

将整个 table 放在表单标签内。投诉是表单标签出现在 table 呈现元素的中间，虽然它可能正确输出，但从技术上讲，该位置是错误的。

A table 可以在表单元素内：

<form>
  <table>
    <tr><td></td></tr>
    <!-- other table related elements -->
  </table>
</form>

...或者表格可以在 table 单元格内：

<table>
  <tr>
    <td>
      <form>
        <!-- form content -->
      </form>
    </td>
  </tr>
  <!-- other table related elements -->
</table>

不过请记住，如前所述，最好避免使用 table 作为 "layout aids"。

在 table header 中放置表单时表单位置无效

Invalid form location when placing form in table header

html

forms

eclipse

html-table

tableheader