I'm a stickler for semantics when I code a site, but the more I think about properly coding input forms with semantic markup, the more I think that it's actually semantically correct to use tables to structure a form.
Sound like anathema? Maybe so. But I'm certainly not the first to suggest that tables are actually suited for the task.
Here's my take: As long as you aren't using attributes in the table to manage the layout (remember our friend CSS?), I think table rows, headers, data cells and captions are all worthy of marking up a form. And more important than being worthy, I will argue that tables are essential for form layout, especially with backwards-compatibility in mind. Because while you can lay out a form with CSS and avoid tables completely, your layout may not necessarily degrade gracefully in older clients. However, with tables, forms still maintain a structure that allows them to make sense, with or without CSS.
Here's the issue: The relationship between a piece of data and it's label doesn't have to be visual, but when you have two or more pieces of related data (or potentially hundreds, thousands, etc.), representing the relationships that exist between different items in the same group of data is absolutely essential to interpreting the meaning of said data.
A table indicates the very essence of those relationships, and it just happens to do that in a very visual manner, the same way a carraige return indicates a new paragraph, which is a visual clue that a new thought is on the way. In the case of HTML, the <p> tags make this distinction, which I ironically forgot to include in the first version of this post.
Anyway, think about the last form you filled out. If you entered your name, address and credit card number, you were giving away what will essentially become tabular data. Your vitals become part of a table when it enters the database, and then likely again when it's displayed in a customer record.
So isn't this data tabular before it enters the database as well?
If that's the case, it stands to reason that a <label> element belongs in a <th> cell, and the ensuing input element would be placed in a <td> cell.
So now the question becomes, is placing a <label> inside of a <th> cell redundant? I'd say no, because of the added functionality that a <label> element, properly marked up with a for="" attribute provides. With a matching for="" attribute, most browsers allow you to activate the labeled element by clicking on the text of the label. Of course, you could duplicate this functionality with some DOM scripting, but that seems like a lot of work just to avoid one extra element in your code.
Can you layout a form without a table? Absolutely. But is it semantically incorrect to use a table to structure your form? I don't think so.
Labels: accessibility, semantic-code, tables, XHTML
13 Comments:
I am migrating a business app from a .Net Windows-Forms universe into .aspx pages. I have been getting into the xhtml / css arena. I like it -- in many ways it is slick. But in some others it is frustrating.
I find your tables-are-not-taboo-on-data-entry-forms thoughts interesting.
But what about when you want an input form that has two or more columns of label / input-field pairs? Kind of like:
Account Code ____ Address ____
Name ____ Route ____
(the above makes more sense when viewed using a fixed-pitch font).
Yes, it is tabular data, but it's arrangement has a twist. I can easily do this in a table, but I can't easily rationalize why this is good semantically.
I guess my options are 1: just do the ugly table thing and get it over with, or 2: make a table for each column of pairs, and float: left; them.
Can you think of a better one that keeps them all in a single ordered list but lets me split it up visually?
Well, you can still put th tags on the headers/labels, and td tags on the fields.
I think the real challenge is this: HTML/XHTML just don't have enough semantic tags to properly handle forms. Just an opinion.
I agree with your opinion. We'll have to see what the future brings -- either enhancements to XHTML or a whole new hosted environment. XAML maybe?
At present I am going with th and td tags but using a separate table for each column of label / field pairs. I would not have thought to use th tags for the labels before reading your article.
All the best.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
This post has been removed by a blog administrator.
Howdy,
When ever I surf on web I never forget to visit this website[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url]www.peterstringer.com really contains lot of useful information. Do you pay attention towards your health?. Let me present you with one fact here. Recent Research indicates that closely 80% of all United States adults are either fat or overweight[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url] So if you're one of these citizens, you're not alone. Its true that we all can't be like Brad Pitt, Angelina Jolie, Megan Fox, and have sexy and perfect six pack abs. Now next question is how you can achive quick weight loss? [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss[/url] is not like piece of cake. You need to improve some of you daily habbits to achive weight loss in short span of time.
About me: I am webmaster of [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss tips[/url]. I am also mentor who can help you lose weight quickly. If you do not want to go under difficult training program than you may also try [url=http://www.weightrapidloss.com/acai-berry-for-quick-weight-loss]Acai Berry[/url] or [url=http://www.weightrapidloss.com/colon-cleanse-for-weight-loss]Colon Cleansing[/url] for fast weight loss.
Post a Comment
<< Home