Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

Building Better Forms with Dreamweaver CS3

Web forms don't do you much good if they're incomplete or filled out with incorrect data. You can prevent this problem with form validation that is sophisticated yet simple to add to your sites.
Written by Dave Sawyer McFarland on September 26, 2007

A Web form is one of the few ways to receive direct feedback from visitors to your site. Whether it's to sign up for an e-mail newsletter, search a database of information, or order products online, a Web form collects valuable information that can help both you and your site's visitors. But only if the information submitted is correct: If a visitor forgets to type in her e-mail address when signing up for an e-mail newsletter, or a visitor accidentally submits a form before filling it out, you can end up with no information at all.

Making sure a Web form collects required information in the appropriate format is known as form validation. In a nutshell, validation lets you prevent a form from being submitted if information is missing, or information is improperly formatted. In addition, you can present an error message to let users know what they did wrong and how to fix it. See the example at http://www.creativepro.com/files/story_images/20070926/form.html.

Although form validation is an important part of building a Web form, it's also usually a complicated process that involves either JavaScript programming on the Web page or server-side programming on the Web server. Fortunately, Dreamweaver CS3 introduces a new way of adding sophisticated form validation easily: Spry Form Validation.

Previous versions of Dreamweaver had a "Validate Form" Behavior. This simple tool did prevent users from submitting a form when information was missing or in an incorrect format, but the options were limited and the resulting error message -- an ugly gray JavaScript pop-up alert window -- looked amateurish. Dreamweaver CS3's more advanced form validation options are compliments of the Spry Framework for Ajax -- a set of JavaScript, CSS and HTML files, and snippets that lets you add interactive elements to a Web site. In this tutorial, I'll take you step-by-step through the process of adding validation to a Web form; but first, a short overview of Spry form validation.

In Dreamweaver CS3, you can check form input for the following types of form fields:

Home | Audio | DIY | Guitar | iPods | Music | Links | Site Map | Contact


Creative Commons License