Categories:

Home / Free JavaScripts / Forms / Here

Cut & Paste Form Field Hints

Credit: The CSS Guy

Description: Provide helpful hints alongside certain form fields to guide your users on  how to fill them out with this elegant script. A hint pops up only when the field is question has the user focus.

Example: Notice how today's date is selected by default.

Tab or click through the fields to reveal the hints. Only Username and Password show hints in this example!

Between 4-12 characters. 
Between 5-13 characters, but not 7. Never 7. 
 

Directions

Step 1: Insert the following script into the <HEAD> section of your page:

Step 2: Add the below sample form into the <BODY> section:


Step 3: This script uses an image as part of the Hints interface.. Download it below (and upload to same directory as webpage by default):

(right click, and select "Save As").

Also, due to the use of CSS to render the Hints style, your webpage should contain a valid doctype at the very top in order for it to look correctly in IE browsers. An example doctype declaration you can add to the very top of your webpage source is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Setup information

Adding a hint to your form elements is very easy and intuitive. Directly below the desired form field, just add the following SPAN element containing your hint message:

<input name="username" id="username" type="text" />
<span class="hint">Between 4-12 characters.<span class="hint-pointer">&nbsp;</span></span>

That's it!

JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.