Embedded Form Field Instructions

No doubt, you've seen form fields with embedded instructions.

Within the form field is the instruction (for example), "Type email address here." The instruction text may be a lighter hue than text will be when typed in. When the field is clicked, the text disappears, ready for typing.

Here is an example:

When the field is clicked or tabbed into, the grayed-text instruction is removed. New content typed into the field is black text.

How To Implement

Implementation is two steps.

1. Put some JavaScript on the page with the form.

2. Give each form field with embedded instructions an onfocus attribute, a value attribute and, optionally, a style attribute.

The JavaScript

Here is the JavaScript for the page with the form.

<script type="text/javascript"><!--
function RemoveInstruction(id,val,color="") {
if( id.value == val ) {
   id.value = "";
   if( color.length ) { id.style.color = color; }
   }
}
//--></script>

The JavaScript is good as is, no customization required. Put the JavaScript anywhere on the page where JavaScript can run, in the HEAD or BODY area. The function RemoveInstruction() will be called when a field with an embedded instruction is clicked.

The Form Fields

The value Attribute —

The value attribute needs to contain the form field instruction. It is how the instruction becomes embedded.

The onfocus Attribute —

The onfocus attribute calls the JavaScript function RemoveInstruction(). The function expects two or three parameters (the third parameter being optional):

1. The word

   this
   
   

   (no quotes). The parameter will send the identity of the form field to function RemoveInstruction().

2. The form field instruction between single quotes. This must be identical to what is specified for the value attribute. Copy and paste to ensure it is identical – except, if the instruction contains any apostrophes or single quotes, each must be escaped with a preceding backward slash character. Example:

   Specify what she\'ll like best.
   
   

3. (Optional) The normal text color for the form field. If the normal field text color is to be different than the instruction text color, specify the normal text color between single quotes. The color can be any valid CSS color value.

Here is an example onfocus attribute:

onfocus="RemoveInstruction(this,'Type your name here.','#000')"

The style Attribute —

The style attribute is optional. The attribute can be used to specify a color for the embedded instruction if different than the normal field text color. Example:

style="color:#999"

The style attribute may of course contain other CSS styling definitions.

The Example Code

Here is the HTML form and JavaScript code used in the above example form.

<form onsubmit="return false;">
<input 
   type="text" 
   name="your_name" 
   value="Type your name here." 
   onfocus="RemoveInstruction(this,'Type your name here.','#000')"
   style="color:#999" 
   size="30">
<br>
<input 
   type="text" 
   name="email" 
   value="Your email address here." 
   onfocus="RemoveInstruction(this,'Your email address here.','#000')"
   style="color:#999" 
   size="30">
</form>

<script type="text/javascript"><!--
function RemoveInstruction(id,val,color) {
if( id.value == val ) {
   id.value = "";
   if( color.length ) { id.style.color = color; }
   }
}
//--></script>

Using It

With the JavaScript somewhere on the page and the form field attributes in place, the form is ready to use.

When a field with an instruction is clicked, the instruction is removed. If the onfocus attribute specifies a color, the color of the text typed into the field will be as specified.

Will Bontrager