[thelist] CSS-Only Forms That Don't Suck

[aardvark]

coming late to the party...

On 16 Jun 2005 at 10:10, ben morrison wrote:
[...]
> I tend to add a pointer cursor to the labels to let users know that
> they can click on them.
[...]

ben, i've found through testing with clients as users (which is 
anecdotal and unscientific at best), the hand cursor tends to confuse 
them -- they think it's a link and are afraid to click it (and lose 
their place), or in a few cases, they click it and expect a pop-up 
with help to appear... these expectations have probably been set by a 
combination of poor page design in the past (which has burned said 
users when they lose the form and all the info they have entered) or 
win32 (or other OS) applications that sometimes have help associated 
with field labels...

now, to some of the other stuff...

jeff, i am mad at you... you've done something i've just recently 
started working on myself (having done simpler forms in the past, i 
wanted to make one general form layout that would work with all my 
types of forms)...

jerk...

anyway, i do have some issues...

you have a nice vertical line down the center of the form which is 
defined by the input fields' left edges... this sets a linear flow 
which holds until the submit button... i feel strongly that the 
submit button is lost on the right and needs to line its left edge up 
to the  vertical you've created... especially since it's hidden under 
your note box otherwise, and i had to search for it each time...

i like how you've done the error fields... however, there are cases 
where i can't afford to have the extra height inserted by those 
boxen... as such, i have an error class that turns my labels red, and
inserts a little red "tick" in the upper left corner of the field 
(except <select>s, which always make me grumpy)... i know you've seen 
this jeff, since i borrowed the tick idea from you... granted, for 
users without CSS, this approach fails... but for apps for targetted 
audiences, it works well for me...

your big red error bar at the top (surprisingly) doesn't stand out 
for me... i actually didn't see until just now... i think you need to 
set it off by increasing its left/right margins so it floats more in 
the middle, instead of spanning the entire width...

tabindices... i've actually stopped using them in linear forms like 
this... because the order of the fields, when linearized, matches the 
tab flow i'd insert, i leave them out and just let the browser handle
tabbing... this reduces conflicts when i really do need to insert 
them with complex forms, or when my form gets inserted into a page 
that already has them defined in a number space that overlaps my 
own...

semantics... i've noticed you're using <div>s as your generic 
container... obviously, when containing block-level elements, you're 
kinda stuck... but i feel that most of the other <div>s could be 
replaced with <p>s, which at least have a semantic meaning and aren't 
just generic... granted, you know my aversion to <div>s and <span>s, 
so this shouldn't surprise you...

it might interest you (or not) to know that one of my early 
implentations along these lines had me stuffing my labels and form 
elements into <dl>s (<label> into <dt>, <input> into <dd>)... it 
actually worked out quite well, especially when linearized and with 
no CSS, but its semantic purity is still kinda questionable...

ok... that's all i've got for now...

enjoy the fish...