BestWeb Nashville

Handy JavaScript Tricks

Web Form Labels Inside Form Field Text Boxes

One handy use of JavaScript has to do with form labels.

Your typical, standard, common form labels (the word[s] that tell you what to type into a given form field; e.g., Name, Email Address, Phone Number, etc.) appear above the empty form field (text box) in vertical forms, or to the left of the form field in horizontal forms.

You have probably seen form labels presented another way, which is pretty cool: the label actually appears inside the form field itself. Not only is this a cool and unique way to present a web form, it also saves room on the page since space for a typical label is no longer required. When you click on (or tab to) the form field in question, the label disappears, allowing you to type in your name (or whatever info the form is asking you for). This is accomplished with JavaScript.

There are a few different ways to accomplish this effect on your web forms.

The simplest way -- the way which requires the least JavaScript code -- is to force the label text (e.g., Name) to be highlighted or selected when you tab to or or click on the text field form element. Since it is highlighted, it then disappears as you type the required info into the text box.

All you have to do is include the following within the INPUT tag for the text box: onfocus="this.select()" For example:

<input name="phone" onfocus="this.select()" type="text" value="phone" >

Here's how it will behave on your form: