A New way to do Form Descriptions
Not so long ago I wrote an article about using CSS for form layout instead of using nested tables. In that article I gave an example of a generic contact form that people could use and build upon. One of the things that I didn't like that much about the form was the way I did descriptions for form fields. I put the extra description for the fields like first name and last name under each form field. Visually this can be confusing for the user and from an aesthetics stand-point it doesn't doesn't look as clean. This thought was what lead me to think of a different method where you actually put the extra form descriptions in the form field for text input boxes.
In order to do this I had to write some Javascript so that when you add the "alt" attribute to the text input the text inside automatically becomes the extra description for that field in the text box. The Javascript also clears out the extra description when the user clicks in the box so the user doesn't have to clear out the extra description manually. If the user doesn't type anything and then clicks on another text box the Javascript puts the extra description back in the input text field and obviously if the the user types something and then clicks on the next text box the Javascript doesn't do anything to the text the user typed.
I won't keep you in suspense any longer, go ahead and try the example form out yourself. If you want to use the Javascript go ahead. You don't have to name your first born after me, but some credit in a Javascript comment would be nice.
All you have to do in order to use the Javascript is include it on the page that has the form that you want to use it on. You will need to add the alt attribute with the text for your extra description for each text input box that you want to have an extra description on. The only other thing that you will need to do is style the CSS classes input.txt and input.txt-desc. The input.txt class is the style that is used for the main input text style and the input.txt-desc class is what I used so I could make the extra form description text have a lighter color.
Also as one final note I have tested to make sure the Javascript and CSS work in Firefox 2.0, Internet Exploder 6, Internet Exploder 7, Safari 2.0.4 and Opera 9.02Firefox 2.0, IE 6, IE 7, Safari 2.0.4 and Opera 9.02.
- Save this article for later, bookmark it!
-
del.icio.us
digg
newsvine
blinklist
magnolia
Post Your Comment
Post Guidelines
Please be considerate of others. Keep comments relevant. Content deemed inappropriate or offensive may be edited and/or deleted. Email addresses are never displayed.
Line breaks and paragraphs are automatically converted — no need to use p or br/. Quotes, apostrophes, and double-dashes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments.
Links can be created using the standard <a href="http://url">urlName</a>. The following inline HTML elements may also be used: strong, em, cite, & code. The title attribute is allowed within any element. All other code will get removed before posting.
Latest Photos
Good Reading
- A bunch of presentations on scaling websites: twitter, Flickr, Bloglines, Vox and more.
- Good links and presentations I'm going through about scaling websites.
- Upside-Down-Ternet
- Now that's a good April fools joke!
- Animator vs. Animation by Alan Becker
- Pretty cool flash animation that a friend showed me.
- 30+ Useful Websites You Probably Didn't Know About
- Looks like some good websites that could come in handy. The GetHuman website definitely sounds useful!
Comments
I’m sure there are other ways, but that’s just one that I thought of first.
if (elem.className == ‘txt’ && elem.alt != ”) {
to include -> && elem.value == ”
so it’ll look like that:
if (elem.className == ‘txt’ && elem.alt != ” && elem.value == ”) {