I've run into a curious problem; I've got a form inside a <tr>
, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form>
element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form
holds two tr
s in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more tr
s and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form>
round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form
could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form
tag? I know I could put a table
inside a td > form
, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
It is valid to put a <form> tag inside a <table> tag. Editing note: tags wrapped as code so that the content reads as intended, but the answer should specify that while the form is inside the table, it cannot be a direct descendant: it must be a child of a cell.
We add the required form fields to the form using the <tr> element that is used to add rows to a table. We use the <td> element to add labels and fields for separate columns. We can add as many fields as required to our form.
Some of them are listed below: Action Attribute: -This is used to send the data to the server after the submission of the form. Method: -This is used to upload the data by using two methods that are Get and Post. Get Method: -It has a limited length of characters of URL.
You cannot interrupt the <table>
structure with any tags besides <thead>
, <tfoot>
, <tbody>
, <tr>
, <th>
, or <td>
. You form tags need to be encapsulated between two <td>
or your entire <table>
needs to be placed within the <form>
tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With