ProblemYou need to give visitors visual cues that illustrate the correct way to fill out a form on your web site. SolutionYou 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 fieldThe 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>
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. DiscussionRegular 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:
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 AlsoRecipe 7.4 for actually modifying the user's data to fit into the correct format for your site. |