Intermixing HTML form and table

Question

For a standard "add item" form page it is desirable to have two submit buttons: an "OK" button and a "cancel" button, where the former POSTs the form to one URL, and the latter GETs some other URL.

This obviously means that two separate FORMs are needed, and, if laid out with tables, the markup would go as follows:

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
 </table>
 <input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
 <input type="submit" value="Cancel"/>
</form>

However, this would result in the two buttons being placed below each other. It would be desirable to have them placed side by side. The following works:

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
  <tr>
   <td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
   <td><input type="submit" value="Cancel"/></td>
  </tr>
 </table>
</form>

But although I've seen it used on commercial websites, I guess it's not quite legal HTML.

So thus:

1) Since the second methods works, are there any good reasons for not using it?

2) Are there any better solutions?

EDIT: This was a silly question. The second method is unnecessary. Solution: add to the first method a CSS rule of:

form
{
  display: inline;
}

Answer 1

You broke my mind.

There are many and varied problems with what you have here, but I'll start by pointing out that Cancel/Reset are not considered good things generally.

I'll follow that by pointing out that you could use CSS to style the buttons side by side in your first example, and follow that by pointing out that a simple type="button" could have any arbitrary script attached to it to do your cancel navigation, and follow that by the fact a simple anchor tag would be even more straightforward.

And I'm not going to mention the table, because that'll just start some trouble.

Answer 2

1) When you create a page using "legal HTML," you can have an expectation that what works in today's browsers will work in tomorrow's browsers, or in some other user agents that you might not have checked the site in. But in the example you've given, the degree to which different browsers agree on how to "fix" the HTML for display is much less certain. It adds a level of predictability to the how the page will display when "valid HTML" is used. Plus, who knows how a user agent such as a screenreader would describe the code in question.

2) Is using a regular anchor tag an option?

<td><input type="submit" value="OK"/></td>
<td> or <a href="index.html">Cancel</a></td>

Or you could use CSS to move a second form and its submit button up into the first form, but the specifics of this might be tricky.

Answer 3

Don't use a second form. Wrap both buttons in the same form, and do something like this with the cancel button:

<input type="button" text="Cancel"
       onclick="document.location.href='index.html';return false;" />