Forum Moderators: open
<table border="1" width="200"><TR>
<TD><form method="POST" action="url" name=f1>
<input type="hidden" name="stuff" value="1">
<input type="submit" name="var" value="press"></form></td></TR></Table>
Thanks, Bruce
Hmm, I will keep experimenting, but if someone knows the answer, please let me know
This will happen if you use <form></form> within a table (which doesn't validate anyhow). Try it this way instead.
<form method="POST" action="url" name=f1>
<table border="1" width="200"><TR>
<TD><input type="hidden" name="stuff" value="1">
<input type="submit" name="var" value="press"></td></TR></Table></form>
I'd like to explore this a bit more. My understanding is that a form CAN be valid if it's contained within a single table cell
<table><tr><td>
<form></form>
</td></tr></table>
What is invalid is code where the form tag is inside the <table> but outside the <tr> or <td>, like this:
<table>
<form>
<tr><td></td></tr>
</form>
</table>
or this:
<table><tr>
<form>
<td>
</td>
</form>
</tr></table>
I know this is true for transitional HTML 4. Is it different in strict HTML? I haven't been able to locate a W3C reference on the matter.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms Within Tables</title>
</head>
<body>
<table border="1" width="200" summary="This is valid but renders an unwanted trailing space after the input element.">
<tr>
<td>
<form method="POST" action="url" name="f1">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>
<br />
<table border="1" width="200"
summary="This is valid because the form is contained within a single table cell. The style display:inline eliminates the unwanted trailing space.">
<tr>
<td>
<form method="POST" action="url" name="f1" style="display:inline;">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>
<form method="POST" action="url" name="f1">
<table border="1" width="200"
summary="This is valid because the entire table is contained withing the form and the input element is contained within a single table cell. No trailing space is rendered within the table cell but default spacing IS rendered before and after the form element. The style display:inline will eliminate unwanted element spacing.">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Try this in Mozilla:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms Within Tables</title>
</head>
<body>
<table border="1" width="200"
summary="This is valid but renders an unwanted trailing space after the input element.">
<tr>
<td>
<form method="POST" action="url" name="f1">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>
<table border="1" width="200"
summary="This is valid because the form is contained within a single table cell. The style display:inline eliminates the unwanted trailing space.">
<tr>
<td>
<form method="POST" action="url" name="f1" style="display:inline; margin:0;">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>
<form method="POST" action="url" name="f1" style="display:inline; margin:0;">
<table border="1" width="200"
summary="This is valid because the entire table is contained withing the form and the input element is contained within a single table cell. No trailing space is rendered.">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>
</body>
</html>
You will see three "stacked" tables with the first showing added spacing (within the td) and no trailing spaces in the following two examples. I added the margin:0; to eliminate form element spacing between the second and third examples.
<form method="POST" action="url" name="f1" style="margin:0;">
<table border="1" width="200">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>
I'm using the K-Meleon browser.
What level of support for standards does K-Melon (sic) provide?K-Meleon uses the Gecko rendering engine developed for Mozilla which provides excellent support for current HTML, CSS [level 1 and some level 2] and DOM standards.
Though setting margin:0; or declaring display:inline accomplish the same results (in most browsers) they work in very different ways. Setting margin:zero overides the default element spacing inherent to forms (again, as rendered in most browsers) while declaring display:inline modifies the "block element," FORM, into an inline behavior.
Other that "strictly speaking," it's six of one, half-dozen of the other. The deciding factor should be the level of support each method demonstrates.
When you tested the display:inline style with K-Meleon apparently you were shown that K-meleon's lack of support for this application. As you report, using margin:0; DOES supply a solution when rendered in K-meleon.
I wonder what version of the Gecko engine K-meleon is using? Mozilla offers a higher level of CSS 2 support so there is a difference between the two....