htmleclipseformshtml-tabletableheader

Invalid form location when placing form in table header


I am using (successfully) the header of my HTML tables as a form. This form is used to filter the table rows below and works great. Here is an example :

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

The only issue is that Eclipse keeps telling me this is an invalid location for a form. The page works perfectly but it seems HTML5 does not allow this. I noticed as I copy-pasted the example that this table has no <thead> tag but others using the same style of header-form have it and Eclipse is still not happy. I have tried moving the <form> tags outside of said <thead> tag with no success.

Short of disabling the warning in Eclipse, is there something I can do for this code to become valid?


Solution

  • Place the entire table inside the form tag. The complaint is that the form tag appears in the middle of the table rendering elements, and though it may output correctly, the placement is technically out of order.

    A table can be inside a form element:

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

    ...or the form can be inside a table cell:

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

    Keep in mind though, that it would be better to avoid tables as "layout aids", as previously mentioned.