Part of the club

Posted by Mike Brittain on December 19, 2006
Personal, WWW

I’ve been a reader of A List Apart since sometime back in ‘98, when it was still a mailing list. Today the magazine published my first contribution, which deals with using label tags appropriately in HTML forms, even when you don’t seem to have room for them.

Update Aug 15, 2008

If you’ve liked the “overlabel” JavaScript technique that I published on A List Apart, you might want to also check out the jQuery version that was assembled by Scott Sauyet.

8 Comments to Part of the club

Romuald
December 19, 2006

Congratulation for ALA!
I’ve made a similar thing for the error in a form. The labels were in absolute over the inputs, with a few javascript to get hide/show if text is typed.

Rob
December 21, 2006

Really enjoyed the article Mike, I think your responses to some of the ‘enthusiastic’ comments have been very restrained! ;)

Mike Brittain
December 21, 2006

Yep, that forum can get very interesting, I’m finding. Thanks for your comments regarding JAWS and the handheld devices. You clearly got what I was shooting for.

Dr Roger Brittain
December 29, 2006

Have you any Views about using the semantic Web for your tagging and using the USA national institutes of Medecine’s, National library of medicine’s unified medical language system for some of the terminology?

paul
February 13, 2007

Thanks for the article, Mike. I found it helpful until I started combining it with other scripts…namely “Switchy McLayout” also on ALA: http://www.alistapart.com/articles/switchymclayout
It prevents the code from executing until page refresh. But I love the idea.

At any rate, I’m wondering if there’s a way to get this to work using jquery? I wish I understood js enough to do it myself.

paul
February 13, 2007

sorry I meant “It prevents the code from executing until page RESIZE”

Shahryar
September 28, 2007

Great tutorial. Newbie to web design here (CSS, JavaScript, etc.)

I want to make a search-box for the main page of my site that is sleek-looking with the label within the search field. When I did a simple google search, I saw something about using ‘onfocus’. The simple solution worked fine in Firefox, but when I tried that in IE6, the warning came on and I had to select “allow” to get the proper effect.

I saw in another forum that someone said to do a google search for “compact form” and that brought me to your article.

Using the techniques you’ve published, IE6 fires up the form just fine.

I was wondering about how to go about two things. I would like the value that’s in the field to say “Please enter anything (name, city, zip, etc.) to get started” but don’t think I want this to be a label should JS be disabled. Or maybe I should let the label be this sentence, but wouldn’t it be too long with spaces and everything to be used correctly?

Any advice on this?

Also, What if I wanted two different submit boxes – one for “find” and one for “add” depending on what they wanted to do with what they entered. What’s the best way to go about this?

Any ideas would be much appreciated.

mikebrittain
February 25, 2008

Glad to see that this technique is getting some use. Just came across Lance Ivy’s post covering how he uses it.