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

[Jeff Howden]

Aardy,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: aardvark
> 
> looks much better matched with the vertical...
> 
> as for the order, remember those tricks we'd do with
> tables (spans, and aligns) to get the last button on
> screen to still be first in source? i've done similar,
> less offensive, tricks with floats... i've floated my
> first button in source order to the right so it
> appears last, and usually floated the rest over as
> well... the problem, of course, is that i need to
> define a container else the buttons sprawl  out to
> the far edge...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I've used floats to get the buttons in the order I wanted as well.  However,
in this case it's not going to be easy without at least one more containing
element which I can float back left.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> setting the label to red, in this case, handles selects
> and radios/checks well... [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

The fact that the entire error reporting experience with regard to the red
ticks isn't consistent has got to affect your sleep at night though.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> [...] hadn't thought about object/embed, but i can't
> think of cases right now where i would be using
> them... [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I've *never* seen a border set on a radio button or checkbox that looked
anything better than hideous.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> [...] i also sometimes change the borders on the
> radios/checks to red, but i'm still on the fence on
> that one...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I have forms where we use an object/embed of an html document to create a
custom form widget, be it a calendar/date picker, clock/time picker, color
picker, etc.  Additionally, there are cases where a rich text editor
"replaces" a textarea.  If the error was restricted to just the form field
it'd be obscured with the rte "replacing" the form field.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> also, i try not to use red for anything other than
> errors... since red is generally a warning color in the
> context of western audiences, using to indicate required
> would be counter to our standards...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Agreed.  When I came up with the idea of the red tick in the corner of
fields with validation errors, I also considered the use of different color
ticks to indicate required and optional fields.  However, the inability to
consistently set this background image on anything other than text inputs
and textareas caused me to abandon that idea.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> ultimately, i always try to find an element that imparts
> some valid structural or semantic meaning, and then I
> try to apply styles to what i've got, without having to
> add any more elements... i think we all know that it's
> hard to get to that ideal anyway...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

That's the very same approach I take as well so I can appreciate your
initial logic behind the use of the <p> element.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> i like that you've dropped the form into your site style
> now, too... makes it a bit easier to grok in a
> "real-world" environment...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Well, #5 on Google for css forms made me rethink where this is placed with
regard to my site and the rest of my content.  *grin*

 [>] Jeff Howden
     jeff at jeffhowden.com
     http://jeffhowden.com/