form inside table

Question

I have included some forms in an HTML table for adding new rows and updating the current row. The problem I'm having is that when I inspect the form in the dev tools, I see that the form elements close immediately after opening (input boxes etc. are not contained within the form).

Therefore, the field cannot be included when submitting the form.

The table rows and input boxes are as follows:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Any help would be great, thank you.

Answer 1

If you want to save your markup, use the "form" attribute :

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(*Form fields outside the <form> tag)

Answer 2

A form is not allowed as a child element of table, tbody or tr. Attempting to place the form in these locations will cause the browser to move the form behind the table (while preserving its contents - table rows, table cells, input boxes, etc.).

You can place the entire table within a form. You can place a form inside a table cell. But you cannot place part of a table inside a form.

Use a form around the entire table. The clicked submit button can then be used to determine which rows to process (to increase speed), or to process each row (to allow batch updates).

HTML 5 introduces form attribute. This allows you to provide a form for each row outside of the table, and then use its id to associate all form controls in a given row with one of the forms.