Topic: Form's Markup

When doing forms I am still stuck in the tables ideology for marking them up. Is there a better way? My usual code for doing a form looks like the following:

<form action="" method="post">

<table summary="The Form Title" id="#tableId">

<tr>

  <td>Label 1</td>

  <td><input type="text" value="" name="textfield1"/></td>

</tr>

<tr>

  <td>Label 2</td>

  <td><input type="text" value="" name="textfield2"/></td>

</tr>

...

...

</table>

<p><input type="submit" value="Submit"/> <input type="reset" value="Clear"/></p>

</form>

Does anyone have a better way of handling this? I have some problems using a table in this fashion because this data is only semi-tabular. I figure there must be something that makes more ideological sense. Does anyone have any solution for this? With all of the sites that are jumping onto the new web design ideology I have not run across complex forms, that might be found for say credit card transactions. Even here a table is used, and I am still not sure if this is the best way to go about things, has anyone anywhere seen or come up with a better way to handle the markup?

Dan @ Code Town

I think laying out a form with tables makes sense, but I know that many disagrees.
I would call it tabular data though, since the user fills in the missing data.

(Edited by HZR on 07-17-2004 18:01)

What are the disagreements? what are the methods that are employeed by those who disagree?

Dan @ Code Town

There are a bunch of html elements specifically for forms -
<fieldset>, <legend>, <label>, etc
Use them to add semantics to your forms.

I've never had a reason to use a table for forms.

As Mobrul said, there are some good form-specific tags to help, and of coruse the same tags that can lay out anything else in a page can be used to layout forms...

As far as the argument for what is and is not tabular data is one that has gone to absurd extremes at times. It's a very big grey area, IMO.

I wouldn't use a table for this, personally, as it's unnecessary and just doesn't seem to fit with the purpose of a table in my mind.

It also seems that in this case, you're not using the table to convey anything tabular, it's being used strcitly as a layout tool. It's missing things like the thead or simply th tags, and doesn't seem to hold any actual structure that would make a table relevant.

FORM(s) and Function - (just over halfway down the page)

Usually, I just put the label above the input and style it ... works good for small forms like comments, email, and guestbook stuff, but wouldn't for long forms where many inputs are required.

ALA's example seems to be a bit cluttered as far as markup.

I would recommend starting with the least possible number of elements, and adding only when needed. Apply styles directly to an existing tag when possible rather than adding a wrapper, etc...

I find it prefereble to use tags specific to forms as much as possible in place of extraneous wrappers, to keep as much semantic relevance as possible.

Mobrul DL and Lurch thanks for taking some time to answer this for me.

Mobrul and DL: Do you have any examples of this in action?

Dan @ Code Town

not off the top of my head.
Let me see what I can whip up.

Thanks!

Dan @ Code Town

Here's an excerpt of a little admin section I did for a friend -

http://in-dented.com/temp/form_example.html

It's not as rigid as some forms may need to be, nor as extensive, but may be helpful....
It does not make use of the <label> tag, but that is a great tag to use.

I generally browse through the spec before marking up forms to refresh my memory.

edit - just made a quick change to make it use the more proper label tags - http://in-dented.com/temp/form_example2.html
the look is identical thanks to CSS.

(Edited by DL-44 on 07-21-2004 00:01)

Great example. I just implimented this in the BugFix project I mentioned in the server side forum. It is cutting down a ton on the markup that I am using. Makes things very nice.

Dan @ Code Town

I'm a day late and a $$ short...
and something's funky w/ in-dented.com. I keep getting message that says your server can not be found.

Anyway, here's what I intended to put up the other day. It is an excerpt from a longer form I created here at work. This should give you a start.

This is really great stuff. I am all about stealing your guys markup and making it into something my own. Thanks for the effort you both put in to present this.

Dan @ Code Town

Here is my *latest* form venture:
http://www.meetscoresonline.com/entry

Very tabular, I used TABLES exclusively for the layout, you can see in the top table that I have used the COLSPAN on a couple of the TD's to add multiple inputs on the same line but at the same time allowing for TD's above and below to occupy more of ar all of the entire row.

This code is 100% XSLT driven, here is the XSLT source code if you are interested. The XSLT is responsible for persisting the field values...
http://www.meetscoresonline.com/entry/documents/entry_template.xsl

Karl