Form Field Prompts

Form text fields may themselves contain the prompt indicating what information is expected. This can be in addition to or instead of form field labels.

When the field is clicked on, the prompt disappears.

The JavaScript must know when to make the text in the form field disappear and when not to. We don't want the text to disappear if the user comes back to edit something previously typed in.

Here is an example.

Here is example code.

<form>
Date:
<input 
   type="text" 
   name="newdate" 
   value="mm-dd-yy" 
   onclick="WipePrompt('mm-dd-yy',this)">
<br />
<input 
   type="submit" 
   value="Click me">
</form>

<script type="text/javascript">
function WipePrompt(s,f) {
if(f.value == s) { f.value = ''; }
}
</script>

The value of the value attribute in the form field is the text of the prompt.

The first parameter of the onclick attribute's WipePrompt() JavaScript function is identical to the text in the value attribute. (The second parameter points to the form field itself so the JavaScript can remove the value.)

When the user clicks on the form field, WipePrompt() deletes the entire field content if, and only if, the content is equal to the text of the prompt. If the form user has typed something into the field, it is not deleted (unless the user types exactly what the prompt text was in the first place).

Will Bontrager