How to handle multiple <form>s in a single table and have HTML validate

You have several options:

  1. Keep your code as is. It’s invalid, but it works. It might fail in some future browsers, but that’s not probable.
  2. 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.
  3. 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.
  4. Put the Save buttons in forms (inside the cell) and refer to those forms from the input buttons with the form attribute. This way each form would be inside one cell and it would be connected with input elements outside it with those attributes. This would be the cleanest solution, but the form attribute is not supported by IE.

I know it's an old post, but just come across this while looking for something else. Another solution to this problem, which is now available 3 years later, it to post arrays of textboxes, and an ID for the row you wish to SAVE or DELETE.

Something similar to:

<form>
  <table>
    <tr>
      <td><input type="text" name="row_id[1]" value="1"></td>
      <td><input type="text" name="five[1]" value="5"></td>
      <td><input type="text" name="three[1]" value="3"></td>
      <td>
        <button name="action" type="submit" value="delete_1">Delete</button>
        <button name="action" type="submit" value="save_1">Save</button>
      </td>
    </tr>
    <tr>
      <td><input type="text" name="row_id[2]" value="2"></td>
      <td><input type="text" name="five[2]" value="7"></td>
      <td><input type="text" name="three[2]" value="10"></td>
      <td>
        <button name="action" type="submit" value="delete_2">Delete</button>
        <button name="action" type="submit" value="save_2">Save</button>
      </td>
    </tr>
  </table>
</form>

You can of course repeat the lines of the table as often as you wish. Each one has a unique ID which is contained within the action button value, as well as within the array of input fields. So if for example you click the Delete button on the second row, you would receive an ACTION value of "delete_2" at the server end. A quick split, explode or similar would then give you an ACTION and an ID.

For the save function, you can then just use this ID to call the relevant text fields from their relevant arrays.

This method will allow you to embed the entire table within a single form.

As a side point, as the DELETE function probably doesn't require the use of any other variables, as these will rarely be updated and then deleted in a single motion, you could achieve the same aim with a simple URL, and a GET parameter for the ID. Be careful here though, as you could allow your users to delete multiple records, just by changing the URL variables, and recalling the page over and over.

Hope this helps someone, and again, I realise this is an old post.