2015-07-07, 21:01, Denis McMahon wrote:
> Is it possible to do this?
Yes.
> Is form a valid child of table or tr elements, such that I can wrap all
> the td within a row in a single form?
No. But you can still do that. Browsers are forgiving, and this is
actually mandated in HTML5 Recommendation, in the parsing section:
http://www.w3.org/TR/html5/syntax.html#parsing-main-intable
It says that within a table element and not within an inner td element,
a <form> tag is an error, but it also specifies what happens.
Example:
<table border>
<form action="...">
<tr>
<td><input name=foo value=0>
<td><input type=submit>
</tr>
</form>
<form action="...i">
<tr>
<td><input name=bar value=42>
<td><input type=submit>
</tr>
</form>
</table>
The two forms act independently of each other. Yet the rows and cells
inside them are laid out as a single table.
The reality is somewhat more messy. If you look at the page in a
browser’s Developer Tools, you’ll see that there are actually two form
elements with empty content, each followed by a tr element. But the form
fields inside them associate with the table preceding them, so things
work as if the structure were like in the source code.
However, if you try to use e.g.
form { outline: solid red }
in CSS, it has no effect on rendering here. The reason is that the form
elements have empty content
> It seems somewhat counter intuitive to have to create one table per form
> and then make a series of javascript calls to make the cells line up.
You might consider using CSS to format them as a single table. This
approach has essential limitations, though.
Yet another approach is to make each row contain one cell containing a
form that has, say, just a submit button, and associated other fields
with that form using the form=... attribute, e.g.
<style>
form { margin: 0 } /* To remove default spacing below. */
</style>
<table border>
<tr>
<td><input name=foo value=0 form=f1>
<td>
<form id=f1 action="...">
<input type=submit >
</form>
<tr>
<td><input name=bar value=42 form=f2>
<td>
<form id=f2 action="...">
<input type=submit >
</form>
</table>
This is valid HTML5. However, the form=... attribute is not recognized
by old browsers, so on them, this does not work at all: the forms have
just the submit buttons, and no data is submitted.
--
Yucca,
http://www.cs.tput.fi/~jkorpela/