Proper way to post a new form in each row of a table?

Question

I have a page where there is a table. In each row of the table, there is data about an online grocery delivery order. At the end of each row, there is a submit button about action to be performed on the order and the form ends there. A new form begins with the next row <tr>

Where exactly should I put the <form> and </form> tags? Should I put the <form> before each <tr> and </form> after the </tr> or should I introduce them in the first data cell <td> of each row and close in the last <td>?

I mean, the page would probably function all right in both ways, but what is "proper" way of doing this? Right now mozilla code view is showing the table tag in red color.

This is how it looks right now.

And this is the relevant part of the php code I am using to dynamically generate a new form for each table row. I am posting this just for the sake of reference, because this does not matter at all here. My question is basic HTML based, not php based.

for($i=0;$i<$count;++$i){
    $res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
    $res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
    $res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;

Possible duplicate of [HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?](http://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way) — 4castle, Aug 07 '16 at 04:24
The best solution is to not use a `` layout. Use a CSS table layout if you really want one. It's the second answer in the dupe. — 4castle, Aug 07 '16 at 04:25
Would it be _"proper"_ programming practice to introduce the new form in the first of each row and end it in the last cell of each row? — Youstay Igo, Aug 07 '16 at 04:36
When it's not specified, a `` element is put inside the `` element. The only valid children for a `` element is a `` element. The only valid children for a `` element is `
` or ` `. So there really isn't any room in the HTML spec for a `
` element. Some browsers will allow it, but it won't always work. — 4castle, Aug 07 '16 at 04:46
This breaks DOM tree. Even if a browser "forgive" you http://validator.w3.org/ will not. — Alex Kudryashev, Aug 08 '16 at 14:36

score 10 · Answer 1 · answered Aug 10 '16 at 01:22

10

HTML5 offers decent solution for your problem. And its name is form attribute. Just put the form into last <td> and refer to its id from other inputs. See example.

<table>
    <tr>
        <td>
            <input type="text" name="inp1" form="form1" />
        </td>                         <!-- ^^^^  ^^^^^ -->
        <td>
            <form id="form1" method="get" action="/">
             <!-- ^^  ^^^^^ -->
                <input type="submit" name="submit1" value="submit" />
            </form>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="inp2" form="form2" />
        </td>
        <td>
            <form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
        </td>
    </tr>
</table>

answered Aug 10 '16 at 01:22

Alex Kudryashev

9,120
3
27
36

1

The problem here is that I have 2 (or more) form objects in each . Thanks for the effort though. Upvoted – Youstay Igo Aug 10 '16 at 16:36
1

Yes you can add more inputs, selects, textareas in each row and add `form` attribute for each of them. The example shows just one "outer" input for shortness. The point is to put `
` element inside a single ``.
– Alex Kudryashev Aug 10 '16 at 17:05
Yes, this is long known issue of IE. See https://stackoverflow.com/questions/20658402/internet-explorer-issue-with-html5-form-attribute-for-button-element – Alex Kudryashev Nov 09 '17 at 00:54

score 1 · Answer 2 · answered Jun 28 '20 at 14:14

If using javascript is an option, you can work without <form> tags? I used jQuery in this example, data is posted to itself (first argument of $.post()).

Table

<table>
        <tbody>
            <tr>
                <td><input name="inputfield[]" type="text" value="input1" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select1-option1">select1-option1</option>
                    <option value="select1-option2">select1-option2</option>
                    <option value="select1-option3">select1-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input2" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select2-option1">select2-option1</option>
                    <option value="select2-option2">select2-option2</option>
                    <option value="select2-option3">select2-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input3" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select3-option1">select3-option1</option>
                    <option value="select3-option2">select3-option2</option>
                    <option value="select3-option3">select3-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
        </tbody>
    </table>

Script

$(".submit").on("click", function(){
    var row = $(this).parents("tr");
    $.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});

JSFiddle

Proper way to post a new form in each row of a table?

2 Answers2