HTML and CSS Reference
In-Depth Information
9.11. Creating Effective Forms
Properly done, a form can provide an effective user interface for your
readers. With some server-side programming tricks, you can use forms
to personalize the documents that you present to readers and thereby
significantly increase the value of your pages on the Web.
9.11.1. Browser Constraints
Unlike other GUIs, browser displays are static. They have little or no cap-
ability for real-time data validation, for example, or for updating the val-
ues in a form based upon user input, giving users no help or guidance.
[*]
Consequently, poorly designed web forms are difficult to fill out.
[*]
This is not entirely true. While neither HTML nor XHTML provides for data validation and user guid-
ance, it is possible to attach to your form elements Java or JavaScript applets that do a very nice job of
validating form data, updating form fields based upon user input, and guiding users through your forms.
Make sure your forms assist users as much as possible. For example, ad-
just the size of text-input fields to give clues on acceptable input; five-
character (or nine-character) zip codes, for instance. Use checkboxes,
radio buttons, and selection lists whenever possible to narrow the list of
choices the user must make.
Make sure you also adequately document your forms. Explain how to fill
them out, supplying examples for each field. Provide appropriate hyper-
links to documentation that describes each field, if necessary.
When the form is submitted, make sure that the server-side application
exhaustively validates the user's data. If an error is discovered, present
the user with intelligent error messages and possible corrections. One of
the most frustrating aspects of filling out forms is to have to start over
from scratch whenever the server discovers an error. To alleviate this
ugly redundancy and burden on your readers, consider spending extra
time and resources on the server side that returns the user's completed
form with the erroneous fields flagged for changes.
