Epicserve

A New way to do Form Descriptions

December 7, 2006 | 11:31 a.m. CST

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.

The new way to do input text field descriptions

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.

Related tags: CSS, Forms, Javascript

Comments

ben perry
1.   At 9:20 p.m. CST on Jan. 4, 2007, ben perry wrote:

seems pretty intuitive. is there any way to have hover-text when you mouse-over the text fields? example: i put my mouse over the "first name" field. can some hover-text appear to say "Enter your first name in this field"?

Brent O'Connor
2.   At 9:45 p.m. CST on Jan. 4, 2007, Brent O'Connor wrote:

Yes, you could add the hover-text by doing something like this, alt="first name|Enter your first name in this field" and then split that text string up in the javascript and then dynamically add a div to the document with the hover-text in it and dynamically position that div where you want it.

I'm sure there are other ways, but that's just one that I thought of first.

seventhapex
3.   At 4:39 p.m. CST on Jan. 13, 2007, seventhapex wrote:

Nice... Again!

boo
4.   At 8:56 a.m. CST on Nov. 10, 2007, boo wrote:

nice, thanks :)

boo
5.   At 9:48 a.m. CST on Nov. 10, 2007, boo wrote:

if you'd like to load a value to the textbox then you'd have to change the following line: if (elem.className == 'txt' && elem.alt != '') {

to include -> && elem.value == ''

so it'll look like that: if (elem.className == 'txt' && elem.alt != '' && elem.value == '') {

Comments are closed.

Comments have been close for this post.