Popup-free form help
In Form Help without Popups, Gez Lemon describes a nice way of providing the user with help text for fields in web forms without using popup windows.
It’s a simple concept that I’ve used a few times: use JavaScript to hide the help text until the user chooses to display it. No annoying popups, and if scripting is disabled the help text is still available.
- Previous post: Stop using CSS hacks now
- Next post: Overflow problems in Internet Explorer
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Ok, I'll be bold here, and show something from a project-in-the-works of mine... http://registrerdeg.no/statoil/5
The script itself ain't 100% polished concerning usability I'm sure, but I think it works pretty well in modern browsers. Be sure to try filling out a field with invalid characters, or leave it empty, then go back to edit it again. And no, the submit button is not disabled in HTML, only through Javascript, and there's backend validation as well for those with JS disabled.
Site is in norwegian, but I guess you will be able to figure things out Roger :-)
I really like that script Frode, any chances you will be releasing the code when it's finished?
Thank you proph3t. Yeah, I've been thinking of releasing some of my scripts, as I've got a few more laying around as "proof-of-concept" as well. But I've been waiting for myself to get my blog together when doing it, so I could write up some info about them too..
If you'd like to be notified or maybe shipped the code when I've tidied and bulletproofed it some more, just send me an e-mail. You'll probably find my e-mail on my site, but it's quite simple: my first name at my last name dot net.
I think my code will be easy for others to adapt, at least once I've written some more comments, as I strive to write as unobtrusive and auto-discoverable code as I can :-)
Man, Frode, that's really pretty. But I have to point out the obvious: the help is just not there without JavaScript. Maybe you want to make it foolproof by applying Gez's idea to your concept?
Thanks Matthias! And yeah, as I said, it's not ready for prime-time with your nitpickin' yet ;-) The help is there in semantic HTML, and will be provided without JS or CSS, no doubt about it!
It's just a habit I have when doing the conceptual development and demoing it to the designers who think visually, to hide stuff using CSS (it's just a simple switch!) when I'm gonna show it in some other form through Javascript.
But thanks for your comments and constructive critiscism, both of you! :-)
Sorry, comments are closed for this post.