More Responsive Order Forms
By Rob Falla
Forms make Internet commerce possible. A Web-based order form collects and transmits information about a user's purchase to a Web site. Then the Web server responds by delivering a page that reflects the user's input. This most basic type of interaction, while valuable, can seem slow and unresponsive to the user. Most Web developers are aware that a lot more can be done with HTML forms to improve the user's experience of ordering a product or service.
In this article we'll look at ways to enhance a Web-based order form that displays additional information in context. In our example, we'll demonstrate how to provide a more detailed description of products. There are two techniques that you can use: The first, which involves using hidden data already included in the file, is broken into two implementations, one for Internet Explorer, and another for Netscape Navigator. Hidden form elements are useful because the visitor needs only to click on a button to see the product description. The second technique involves using a Java applet to read from another HTML document and insert the information into a predefined object on the current page.
Both techniques can be adapted to any HTML form you're currently using. We'll examine the HTML requirements and the JavaScript used to make each work; the listings and examples are thorough enough that you can simply copy the code and paste it into your own form, making adjustments where needed.
The first technique, in the IE4 version, uses the HTML element DIV and the CSS display property to show or hide its contents; JavaScript code determines when the DIV is shown and when it's hidden.
