HTML Guides for hidden input

An <input> can't sit directly inside a <table>, <thead>, <tbody>, <tfoot> or <tr>: put it inside a <td> or <th> cell, or move it outside the table.

Table elements only accept specific children. A <table> holds <caption>, <colgroup>, <thead>, <tbody>, <tfoot> and <tr>, and a <tr> holds <td> and <th>.

When the browser's parser finds a misplaced <input>, it moves the element out and inserts it just before the table. The HTML specification calls this foster parenting. The field then shows up above the table instead of in the row where you wrote it. Hidden inputs (type="hidden") are the exception: the parser leaves them in place, but the validator flags them too.

This usually comes from forms laid out with tables, where hidden fields such as CSRF tokens or page numbers end up between <tr> elements. Move hidden inputs before or after the <table>, keeping them inside the <form>, and put visible inputs in a cell. If the <form> tag itself sits inside the table, move it out so it wraps the whole <table>. A <form> between rows triggers its own validation error.

Invalid example

<form action="/search">

<table>

<tr>

<td><label for="q">Search</label></td>

<td><input type="text" id="q" name="q"></td>

</tr>

<input type="hidden" name="page" value="1">

</table>

</form>

Valid example

<form action="/search">

<input type="hidden" name="page" value="1">

<table>

<tr>

<td><label for="q">Search</label></td>

<td><input type="text" id="q" name="q"></td>

</tr>

</table>

</form>