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.
Really enjoyed the article Mike, I think your responses to some of the ‘enthusiastic’ comments have been very restrained! ;)
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.
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?
paulThanks 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.
paulsorry I meant “It prevents the code from executing until page RESIZE”
ShahryarGreat 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.
Glad to see that this technique is getting some use. Just came across Lance Ivy’s post covering how he uses it.
Del.icio.us Bookmarks
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.