Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form tag won't enclose elements inside a table

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:

enter image description here

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

like image 794
Bojangles Avatar asked Jul 07 '11 19:07

Bojangles


People also ask

Can we use form tag inside table?

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.

How do I add a form tag to a table?

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.

What are the 4 attributes of form tag?

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.


2 Answers

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>
like image 114
Michael Irigoyen Avatar answered Sep 29 '22 11:09

Michael Irigoyen


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>
like image 40
Rodolfo Avatar answered Sep 29 '22 12:09

Rodolfo