# Start tag “form” seen in “table”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/start-tag-form-seen-in-table
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<form>` can't sit directly inside a `<table>`, `<thead>`, `<tbody>`, `<tfoot>` or `<tr>`: wrap the whole table in the form, or put the form inside a single `<td>` or `<th>` cell.

Table elements only accept specific children. A `<table>` holds `<caption>`, `<colgroup>`, `<thead>`, `<tbody>`, `<tfoot>` and `<tr>`, and a `<tr>` holds `<td>` and `<th>`. A `<form>` wrapped around one or more rows breaks that structure.

The browser's parser handles this case in a special way. It creates the form as an empty element at the spot where the tag appears, closes it right away, and drops the matching `</form>` end tag, which the validator reports as a separate `Stray end tag “form”` error. Browsers still link the fields in the following rows to that empty form, so submitting often appears to work. But the fields are not inside the form in the DOM: a selector like `form input` won't find them, and if a script moves or re-renders those rows, the fields lose their form.

When each row needs its own form, such as an "Update" button per cart item, keep the `<form>` elements outside the table and link each field and button to its form with the `form` attribute, which takes the form's `id`.

## Invalid example

```html
<table>
  <form action="/cart" method="post">
    <tr>
      <td><label for="qty">Quantity</label></td>
      <td><input type="number" id="qty" name="qty"></td>
      <td><button type="submit">Update</button></td>
    </tr>
  </form>
</table>
```

## Valid example

```html
<form action="/cart" method="post">
  <table>
    <tr>
      <td><label for="qty">Quantity</label></td>
      <td><input type="number" id="qty" name="qty"></td>
      <td><button type="submit">Update</button></td>
    </tr>
  </table>
</form>
```

## Valid example with one form per row

```html
<form id="item-1" action="/cart/1" method="post"></form>
<form id="item-2" action="/cart/2" method="post"></form>
<table>
  <tr>
    <td><input type="number" name="qty" form="item-1" aria-label="Quantity for item 1"></td>
    <td><button type="submit" form="item-1">Update</button></td>
  </tr>
  <tr>
    <td><input type="number" name="qty" form="item-2" aria-label="Quantity for item 2"></td>
    <td><button type="submit" form="item-2">Update</button></td>
  </tr>
</table>
```