CSS3 Basic UI: suggest making it easy to arrange labels relative to form controls

One proposal I have heard often is that the 'caption-side' property ought to
apply to a form control, to give general guidance on how the label should be
situated relative to the active portion of the form control.

Upon consideration, I don't think 'caption-side' is appropriate here (unless
other table styling is present). Something similar is needed, independent
from tables.

I suggest 'label-side', with possible values of 'above', below', before',
and 'after'. (The last two would respect LTR and RTL text directions).

Example:

<xforms:input bind="whatever">
  <xforms:label>Label</xforms:label>
</xforms:input>

With the following CSS applied:

@namespace xforms url(http://www.w3.org/2002/xforms/cr);

xforms|input { label-side: above; text-align: left }

would result in something like the following:
WARNING: ASCII art follows:

Label_________
|_____________|

I'm not fixated on this solution--anything that's easy to author and can
accomplish a similar effect is welcome.

Thanks!

.micah

Received on Tuesday, 25 March 2003 11:23:58 UTC