Multi Cell Forms

April 11th, 2006

I was playing around with HTML the other day. Here's the scenario:

I have a table of n rows, with 3 columns. The first column contains a text box, the second column contains a submit button for the data in the first column, and there is a third column which consists of another form.

We should be looking at HTML a bit like this:

<tr><td><form...><input type="text"....></td><td><input type="submit"...></form></td><td><form...><input type="submit"...></form></td></tr>

However, because XHTML and XML require elements to be nested properly, this would be an illegal arrangement.

I tried the following arrangement moving the form tags so they encompass the two table cells.

<tr><form...><td><input type="text"....></td><td><input type="submit"...></td></form><td><form...><input type="submit"...></form></td></tr>

Once again, this was invalid as the form tag is not allowed to exist as a child of the <tr> element.

In the end I modified the layout of the form so I could do this.

But I'm still wondering whether it is possible to have a XHTML valid form which spans multiple table cells without ugly hacks such as nested tables. Any ideas?

Web Development
Comments(6)

6 Responses to “Multi Cell Forms”

# Aktlauson 12 Apr 2006 at 3:58 pm

You could use the css property display and emulate tables:

display: table;
display: table-row;
display: table-cell;

etc..
# Khloon 12 Apr 2006 at 5:39 pm

I guess that is possible but it would be semantically incorrect to do so - if it is tabular data then it should be marked up as such. I'm really trying to point out a problem/weakness with XML/XHTML
# Xeenon 13 Apr 2006 at 11:55 am

make one form for both submit buttons and ensure that they have the same name but a different value

input name="action" value="Search"
input name="action" value="Format C:"

To know which form was submitted you need PHP to check for the action value and do whatever you want to do. Disadvantages are that you can't submit to different php files but it's ok if you either put everything in one file or just split everything into classes/functions and just call it from a doorway page (or startpage or whatever). Probably more important is, that this doesn't work if the form contains a file upload field or any other field that contains large amouts of data. If the user e.g. selected a file first but then decided to abort (clicks abort submit button) the file would be uploaded anyway which definitely sucks. For most use cases with textarea/input it's fine as submitting 1kb more or less doesn't matter at all (well, might on 56k)

Hm while writing this I'm in doubt whether my method really worked or not… well, it's up to you to try ;)
# Khloon 13 Apr 2006 at 12:29 pm

Hmm There you have a form which spans the whole row of a table however I still can't see a way of having a form span the whole row and having valid XHTML. You can't do the following because a form element is not allowed to be a child of a tr element:
```
<tr><form><td></td><td></td><td></td></form></tr>
```
Nor can you wrap the form tags around the tr row - again, form isn't allowed to be a child of the table element.
# Xeenon 13 Apr 2006 at 4:13 pm

put it around the whole table then. except you have a zillion forms in that table that do pretty the same but rely on different ids (e.g. show replys refering to the comment above) or forms that contain large amouts of data.

Does it work then, or what prevents you from using one form for the whole table?
# Khloon 13 Apr 2006 at 5:08 pm

That's what I did in the end. I changed the design of the form so it was one big form rather than a separate one for each entry.

Still, I think it's an issue in the HTML/XHTML specification that there doesn't seem to be a way to validly create a form which encompasses only part of a table.