How to handle multiple <form>s in a single table and have HTML validate
Question -- it seems that I cannot have two forms embedded into a single table AND have my HTML validate. For example, W3 Validator gives me Element <form> not allowed as child of element <tr> in this context. I don't see a way to go around validation errors.
What I want to achieve is this:
- In an html table "row" I have and can change some input values and then use my "Save" button at the end of the row, to save them
- If I have to delete a row, I can do so by pressing Delete button.
- UI-wise it makes sense to me to have two forms, one each for Save/Delete button, per row.
- I can have several rows, each row with its own Save/Delete button
Example UI
Numbers are input fields and save/delete are buttons.
My simplified non-conforming HTML below:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<table>
<tr>
<form>
<td><input type="text" name="row_id" value="1"></td>
<td><input type="text" name="five" value="5"></td>
<td><input type="text" name="three" value="3"></td>
<td><input type="submit" value="Save This Row"></td>
</form>
<td><form>
<input type="text" name="row_id" value="1">
<input type="submit" value="Delete This Row">
</form></td>
</tr>
</table>
</body>
</html>
HTML works surprisingly, but it does not validate. I am seeking a solution where it does both - work and validate.
Answer
You have several options:
- Keep your code as is. It’s invalid, but it works. It might fail in some future browsers, but that’s not probable.
- Reorganize the code so that all fields are in one form and put the entire table inside that form. This probably requires changes to the server-side form handler and may require changes to HTML too.
- Reorganize it so that you have a two-column table, with the first column containing forms that contain inner one-row tables. This requires that you explicitly set the column widths of the inner tables to make the whole look like one table.
- Put the Save buttons in forms (inside the cell) and refer to those forms from the
inputbuttons with theformattribute. This way each form would be inside one cell and it would be connected withinputelements outside it with those attributes. This would be the cleanest solution, but theformattribute is not supported by IE.