HTML: form table?

Question

I often see that I want to create a form table - a bunch of lines, each line - a separate form with its own fields and a submit button. For example, here is an example of an application for your favorite store - imagine that this is a verification screen that allows you to update the quantities and attributes of your chosen pets and save changes before checking:

Pet Quantity Color Variety Update snake 4 black rattle update puppy 3 pink dalmatian update 

I would like to do this with HTML, which looks like this:

 <table> <thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead> <tbody> <tr> <form> <td>snake<input type="hidden" name="cartitem" value="55"></td> <td><input name="count" value=4/></td> <td><select name="color"></select></td> <td><select name="variety"></select></td> <td><input type="submit"></td> </form> </tr> </tbody> </table> 

This is basically a table with forms, one form for each row. Turning on the update once allows you to update this particular line (this is not a real example, my real applications really require line independence).

But this is not valid HTML. According to spec, a <form> must be either completely inside a <td> or completely outside a <table> . This invalid html is breaking javascript libraries and is a huge pain to deal with.

In the end, I create one table that will contain the column headings, and then creating one table for each form. But this requires fixed column widths so that the inputs are arranged in neat columns, which is a subparameter. How do you deal with this problem? Is the obvious simple solution that I am missing? How to create a form table?

Answer 1

The trick here is to simply use one form, for example.

  <form> <table> <!-- rows... --> </table> <p><input type="submit" value="Update quantity"></p> </form> 

Say that you have a product snake with identifier 6. Then you specify the input for the quantity of the number of items field [6].

I do not know which server-side language you are using, but in PHP you can then iterate over the quanta and update based on the identifier. You would get an array like this:

 $_POST['quantity'] = array( '6' => 4 ) 

Answer 2

You can use css to display the table in other elements.

 .table { display: table; } .table>* { display: table-row; } .table>*>* { display: table-cell; } 

Then you use the following valid html.

 <div class="table"> <form> <div>snake<input type="hidden" name="cartitem" value="55"></div> <div><input name="count" value=4/></div> </form> </div>