Cut & Paste Form Field Hints
|
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.
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"> </span></span>
That's it!