[thelist] Styling in-line elements

Barney Carroll barney.carroll at gmail.com
Wed Mar 18 10:23:17 CDT 2009

Based on the intrinsic behaviour and semantic associations of labels, I
think you want your extended descriptive text *inside *the label, as opposed
to the label inside some descriptive text, ie:
  <label for="firstNameInput">First, type your <strong>first name</strong>
into the following box:</label>
  <input id="firstNameInput" type="text" />

PS: Can I branch this thread out to argue about how legitimate a use of
tables that is? ;)

Don't know if it's got the similar intentions behind it, but a while back I
helped design & develop a site whose goal is to promote archaeology to the
disabled, and the main component was an extensive survey where we had to
make forms as clear as possible. It was basically hardcore WAI or death :)
The forms we came up with are pretty interesting though (you have to
register first, but the University of Reading isn't going to spam you):

Barney Carroll
Web designer & front-end developer

w: www.clickwork.net

t: +44 (0) 7594 506 381

2009/3/18 Will <willthemoor at gmail.com>

> >> You see, we're trying to develop these forms so they hold the user's
> hand as
> >> much as possible (that's what has been requested), so often there's a
> nice
> >> explanation before an input element. Perhaps it would be best to both
> have
> >> the explanation and then a separate label....you know what, that
> actually
> >> would be better.
> >
> > I agree.
> >
> Me too.  Our default form mark up is <li><label /><input /></li> - we
> figured it's a list of form elements. A stretch perhaps but nothing
> seemed more appropriate and it allows us the control that's sometimes
> required. For instance, we can put class="error" on the li and work
> our css for the inner elements from there. I also wind up using
> something like class="checkwrap" on the li for styling of input
> type=radio and type=checkbox since they're almost certainly laid out
> differently from normal label/input pairs. The <li> also allows you to
> semantically group things like additional information, hints and error
> messaging. Of course, all of the same can be done with a div or p, I
> just think it's more of an li.
> As far as "inline elements" remaining inline, I don't buy it. I may be
> wrong but I think that's really only a display distinction in the
> first place. It's not at all like using <p><strong>for a
> headline</strong><p>.
> Will
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

More information about the thelist mailing list