Avoid nested forms in a table

Question

How to create the next valid (x) HTML, where the checkboxes and radio buttons (columns 3 and 4) and the save button are part of one large form, and all the delete buttons (last column) are submit buttons of their own form (having a hidden field with the locale ID ), without using javascript?

language | region | active | default | ----------------------------------------------- en | GB | [x] | (*) | X delete nl | NL | [x] | ( ) | X delete nl | BE | [x] | ( ) | X delete [save] 

Using a table, I need to insert forms that are, of course, invalid. So I was wondering what other possibilities I have. Perhaps floating columns?

Answer 1

You can use one form. Use the fact that the name-value pair of the pressed button will be sent as a request parameter. While filling in the HTML form, dynamically embed the locale identifier of the button name.

 <input type="submit" name="delete_1" value="Delete" /> <input type="submit" name="delete_2" value="Delete" /> <input type="submit" name="delete_3" value="Delete" /> 

And then on the server side, check if any of them were clicked (pseudo / Java style):

 for (Locale locale : locales) { if (request.getParameter("delete_" + locale.getId()) != null) { // Delete button is pressed for this locale. } } 

Answer 2

You can use two different tables: one with one form for flags, radio buttons and a save button, and the second with delete buttons and a hidden field.

Just use CSS to move them next to each other.