将表格放在表格标题中时表格位置无效

时间:2018-12-01 22:02:14

标签: html5 eclipse forms html-table tableheader

我正在(成功地)使用HTML表的标题作为表单。该表格用于过滤下面的表格行,效果很好。这是一个示例:

<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不允许这样做。在复制粘贴示例时,我注意到该表没有<thead>标记,但是其他使用相同标题格式的表却有它,而Eclipse仍然不满意。我尝试将<form>标记移出所说的<thead>标记之外,但没有成功。

在Eclipse中禁用警告的简短内容,我可以做些什么使这段代码生效吗?

1 个答案:

答案 0 :(得分:0)

将整个表格放在form标记内。抱怨是表单标签出现在表格渲染元素的中间,尽管可能正确输出,但从技术上讲该位置是乱序的。

表可以在表单元素内:

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

...或者表单可以在表格单元格内:

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

但是请记住,如前所述,最好避免使用表格作为“布局辅助工具”。