Hi ,

>although I think that placing the label text before the field instead of 
above makes it even more accessible for the avarage visitor, especcially 
if the form tends to be long

All the research I have read claims labels being above the field results 
in the greatest useability.
http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

I have had good success using the standard <fieldset> and <label> tags to 
mark up my forms, the only drawback to this method is the increased 
vertical height, but again useability research has shown that if your page 
has the content/function your users are after scrolliong is not a issue. 
(and you should be cutting your forms down to the bare minimum anyway.)

A short example: http://www.griffith.edu.au/cgi-bin/feedbackform.cgi

Something else worth mentioning, i did have some issues with syling an 
array of radio or checkboxes, i.e you have a question, plus you have to 
label that particular input (with a prefilled answer), but this was neatly 
solved with a nested fieldset.

example: 
http://www.griffith.edu.au/web-publishing/content-modules/radio-buttons.html
example: 
http://www.griffith.edu.au/web-publishing/content-modules/checkboxes.html
Kind Regards,

Kane Tapping
Web Standards Developer
Web and Content Management Services
Griffith University. 4111. Australia.
[EMAIL PROTECTED]
Phone: +61 (0)7 3735 7630





Sander Aarts <[EMAIL PROTECTED]> 
Sent by: [EMAIL PROTECTED]
25/05/2007 10:22 AM
Please respond to
[email protected]


To
[email protected]
cc

Subject
Re: [WSG] dl v table for form layout






Hello Mike,

Mike at Green-Beast.com schreef: 
If one tries hard enough, it seems anything can be considered a list of 
sorts.
 
That might be true, but I hope you will agree that it's easier to consider 
a form being a list than a whole page.

A form is a list of controls and their related inputs, but we wouldn't use 
a 
list to organize form controls, so we'd use fieldsets/legends, labels and 
inputs. Using the Q&A scenario which you might use to try and justify the 
use of a DL to organize a form, let's swap out the elements with their 
appropriate ones (which need to be used anyway).

DL = Fieldset
??  = Legend
DT = Label (the "Q")
DD = Input (the "A")
 
I didn't say I use <dl>s instead of <fieldset>s. I use them too if needed, 
although I'm not a big fan of <legend> (from a layout point of view this 
must be the most annoying element).
Btw, in some cases the <label> is not the 'Q' but the 'A', as with 
checkboxes and radio buttons. And I think that originally <legend>s were 
meant to replace the  'Q'-<label> in these cases. 

It seems to me the form has everything we need to properly organize it. 
Once 
it's made we can add then a few styles and layout rules with CSS to make 
it 
look good.
But in most cases not as good as the designer whose designs I'll have to 
translate into templates wants it. Sometimes you just have not enough 
hooks for CSS or you'll have to add extra elements in order to make clear 
snippets that can be reused within the system of the site. And even though 
we would all like to create websites that use no more than the necessary 
semantic elements, I'm sure you're familiar with this problem if you work 
with designs that are not yours or for customers that want don't want an 
archaic form layout.
And if you do need another element then I'd say a <dl> comes very close to 
the semantic structure of a form because of this Q&A thing.

See a real (somewhat styled) example:  http://green-beast.com/gbcf/ (Demo 
Form)

Using this is satifies all of the needs of users and spec requirements. No 

definition list necessary or needed.
 
Your demo form is a wonderful example of a web standards compliant and 
accessible form (although I think that placing the label text before the 
field instead of above makes it even more accessible for the avarage 
visitor, especcially if the form tends to be long), but it also has this 
basic layout. Which is fine, but not always what is requested.

<!-- slightly off topic: if I may make a suggestion concerning usability: 
why not have JavaScript, if supported, answer and hide the anti-spam 
question? That way a lot of people won't be bothered with it  :-)  --> 

I certainly wasn't trying to make a case 
for using a list, any list, for a form.
 
I know and you are forgiven ;-)

Cheers.
Sander


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
******************************************************************* 


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to