Recipe 7.3. Using Sample Input to Reduce Errors


Problem

You need to give visitors visual cues that illustrate the correct way to fill out a form on your web site.

Solution

You can use specially formatted sample data to demonstrate to visitors exactly what and how you want them to fill in a form. A simple, subtle label beneath a form field guides users as they type their personal information into a form. You also can pre-fill the form fields with a description of what to type in, and then use JavaScript to erase the guide text when users click in the field to begin typing.

The form in Figure 7-3 uses both methods.

First, set up a style for the sample data that appears beneath the form fields. I used the <cite> tag and gave it special properties within this form, which I tagged with a CSS ID named comments.

Figure 7-3. A form with sample data guides users through the information they need to enter. The gray italic labels indicate how information such as phone numbers and email addresses should be formatted. The mock data in the actual fields disappears automatically when a respondent clicks in the field


The stylesheet rule looks like this:

 form#comments cite {     font-size: 0.9em;     color: #333333; } 

Then just wrap any sample input you want in the <cite> tag like this:

 <cite>Ex. 512-555-1212</cite> 

This form also uses the JavaScript event handler onFocus to wipe out the data already in the field when the visitor begins typing in it. The pre-filled information, such as "First and Last Name" or "House Number and Street," disappears automatically when the users clicks her mouse, or focuses, on the form field. The required JavaScript goes right in the <input> tag, like this:

 <input name="name" type="text" value="First and Last Name" size="25"    onFocus="if(form.name.value=='First and Last Name')form.name.value='';"> 

The JavaScript includes a condition that keeps the field from self-erasing more than once. The if statement checks the value of the name field in the form. If its value is the default value ("First and Last Name"), then the script sets the value to nothing, indicated by the two single quotes near the end of the script. If the user already has typed her name into the field, and then goes back to fix a typo, the script will leave her earlier entry intact as she types in her correction.

The full code for the form looks like this:

 <form method="post" action="/cgi-bin/formmail.cgi" >  <h2>Your Name</h2>   <input name="name" type="text" value="First and Last Name" size="25"    onFocus="if(form.name.value=='First and Last Name')                form.name.value='';">   <br>   <cite>Ex. Richard Roe</cite>  <h2>Your Address</h2>   <input name="address" type="text" value="House Number and Street"          size="25"    onFocus="if(form.address.value=='House Number and Street')                form.address.value='';"><br>   <cite>Ex. 123 Church St.</cite><br>  <div >   <input name="city" type="text" value="City" size="15"    onFocus="if(form.city.value=='City')form.city.value='';"><br>   <cite>Ex. Anywhere</cite>  </div>  <div >   <input name="state" type="text" value="" size="2"><br>   <cite>State/Province</cite>  </div>  <div >   <input name="pcode" type="text" value="Postal Code" size="10"    onFocus="if(form.pcode.value=='Postal Code')form.pcode.value='';"><br>   <cite>Ex. 78756-3845</cite>  </div>  <h2>Your Phone Number</h2>  <input name="phone" type="text" value="512-555-1212" size="35"   onFocus="if(form.phone.value=='512-555-1212')form.phone.value='';"><br>  <cite>Ex. 512-555-1212</cite>  <h2>Your Email Address</h2>  <input name="email" type="text" value="address@domain.com" size="35"   onFocus="if(form.email.value=='address@domain.com')form.email.value='';"><br>  <cite>Ex. address@domain.com</cite><br><br>  <input name="Reset" value = "Clear Form " type="reset">  <input name="Submit" value="Send" type="submit"> </form> 

In this and other examples throughout the book, there are extra line feeds inserted for printing. For example, there would be no line feed between onFocus="if(form.address.value=='House Number and Street') and form.address.value='';"><br> in your actual HTML.


Bear in mind two caveats when employing the JavaScript method described in this Recipe. First, JavaScript is case-sensitive; fields named email and Email are different animals as far as JavaScript is concerned. When I encounter a misbehaving script, that's the first thing I check. Also, if you're using JavaScript to test for missing form information, a field with a preset value can slip through the script's checking routine even if the user has not entered any meaningful information into it.

Discussion

Regular web surfers encounter dozens of web site forms every year, so every bit of guidance you can give about using yours speeds up their visit to your site. It will save you time, too.

The techniques described in this Recipe apply to all sorts of information you may solicit from visitors via your web site, not just simple name and address fields. Every question you can eliminate from a visitor's mind as they fill in your web site form improves the impression they have about the company or organization behind your web site. For example:

  • Should I enter the year as two digits or four?

  • Should I put spaces or hyphens in my credit card number?

  • Should I include the leading zeroes in my account number?

Properly formatted information from a web site cuts down your workload. By reducing (or even eliminating the need) to fix and reformat information you collect from site visitors, you can concentrate on improving other aspects of your site, not on fixing what should have been right the first time.

See Also

Recipe 7.4 for actually modifying the user's data to fit into the correct format for your site.



Web Site Cookbook.
Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))
ISBN: 0596101090
EAN: 2147483647
Year: N/A
Pages: 144
Authors: Doug Addison

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net