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

Jeff Howden jeff at jeffhowden.com
Tue Jun 21 16:08:27 CDT 2005


Rutabaga,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: aardvark
> 
> 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...
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

The best I can seem to manage is right-aligning the right edge of the
right-most button with the vertical line created by all the form elements.

http://jeffhowden.com/code/css/forms/

I'm not sure I'm happy with this look though.

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

You know what's worked for me?

Smaller doses, less often.

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

Ack, I'm blind.  X-(

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

Well, certainly, which creates its own set of issues regarding error
reporting for the content in the WYSIWYG that's consistent with all the rest
of your error reporting.

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

When doing on the fly validation client-side and the offending problem is
fixed, switching the red tick out on errored fields for a green tick can be
a good indicator for users.  Pre-validation though, it might work to use a
black tick for required and a grey one for optional.  These, of course, are
replaced when a validation error is returned.

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

Well, now that I'm #5 it's time to work on the actual promotion, eh?

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



More information about the thelist mailing list