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

aardvark evolt at roselli.org
Tue Jun 21 15:14:47 CDT 2005

On 21 Jun 2005 at 11:03, Jeff Howden wrote:
> 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.

aye, that's the rub... without looking at your CSS, can you margin-
left and float? you know, float it left, assign a large margin to 
match the vertical, and go from there? damn -- can't code right now 
or i'd try it...

> ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> > 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.

feh... they're just night terrors... i mean, who doesn't get those?

but yes, you are correct... there are many cases where this hasn't at 
all been an issue simply because many of the forms haven't called for 
radios/checkboxen... when i do deal with radios/checkboxen, i've 
grouped them and can block out there error differently (actually, 
very much as you've done it with the tick in the container)... i've 
only affected them via the border when i have a lone box, no group... 
and it *can* be less than hideous...

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

c'mon -- dashed 5px #00ff00;

try it... it's purdy...

> 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.

ahhh... gotcha... we have a WYSIWYG, for example, but we don't throw 
a tick in there or have a traditional label... it would all just get 
lost in the chaos...

> 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.

that and the ticks are only visible via CSS... and grey gets lost, 
too... i've tried that... blue looks like a bad browser add-on... 
tried that, too...

> ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> > 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*

yeah... good idea...

although i'm surprised -- you've had nearly a week and you're still 
only #5... sad...

More information about the thelist mailing list