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

Jeff Howden jeff at jeffhowden.com
Thu Jun 16 01:33:50 CDT 2005


Joshua,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Joshua Olson [mailto:joshua at waetech.com] 
> 
> > http://dev.jeffhowden.com/css_forms/
> 
> I'm not sure what you are asking from us, [...]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Well, the primary request has to do with the problems I've found with
Safari.  I'm sorta stuck on what to do to fix them, especially since what I
believe will fix the problems for v1.0.3 will make the problems in v1.2
worse and vice versa.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
>[...] but I do have some comments.  I'm going to focus
> on the improvements since you already believe that this
> "trounces anything currently available".
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I didn't mean to come off sounding as if this doesn't have any issues.  I've
just put a lot of time and effort into it and am very pleased with how it
compares to everything else with respect to consistency between browsers and
layout.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 1.  The error messages have some padding issues in
>     regards to the border and the placement of the error
>     icon.  This is aesthetic, but it could use
>     improving.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Padding addressed.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 2.  Clicking on the label for a radio button group sets
>     the checked radio button to the first item.  This
>     is counter intuitive.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Indeed.  The only other options I see are using some non-semantic markup to
style the non-label text or to use a <label> element without a "for"
attribute basically making it an island.  I don't really like either of
these solutions.  When presented with a similar decision, what do others do?

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 3.  The information fields on the right are too far out
>     when viewing the form at full screen at 1600x1200.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Well, there's certainly something to be said for the general (lack of)
usability of (trying to use) a browser window maximized at a 1600x1200
resolution.  That aside, this concept is designed to be "restrained" within
a normal site design, be that fixed or liquid with appropriate design and
content elements and whitespace.  However, it could also function very well
at a fixed or maximum width.  It's simple matter of applying the appropriate
property to the form selector.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 4.  When the font sizes are big, the last option in the 
>     "Message Subject" field shifts all funky.  This is
>     on IE 6/PC.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

Yes, I see what you mean.  I'll poke around, but not entirely sure what's
causing it.  I'm not terribly concerned about it though as this radio
button/text input combination are fairly rare in conventional forms and the
misalignment doesn't really affect the usability of the form that much.
It's really just an aesthetic nuisance.

On a related note, it'll be important to make sure that labels are
restrained to the minimum amount of text necessary to, uh, label the
associated form field so as to avoid issues created by the text wrapping
when zoomed/set to largest.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 5.  I'm not sure how you pulled this off, but the fonts
>     won't resize in FF using the ctrl+wheel.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

I've no clue either.  I'm using percentages for font sizes throughout.

Thanks for your input,

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



More information about the thelist mailing list