Hidden Fields

Previous Table of Contents Next

Hidden Fields

The easiest way to have Web forms "remember" information is to embed previous information in them by using hidden fields. Hidden fields are part of the HTML forms specification that allow fields and values to be part of an HTML form but not appear in the form when it's rendered visually. In HTML, they're written as follows:

<input type="hidden" name="fullname" value="Pink Floyd"/>

If the preceding HTML were put into a form, a new name ("fullname") and value ("Pink Floyd") would be part of the form. If the form were submitted to a Perl CGI program, the param function would return a key and a value for the hidden field.

The Online Store

For an example of how to use hidden fields, consider an online store that uses a series of Web pages to allow people to shop for items from an online catalog. For now, I'll just walk you through the workings of a complex form. Later in this hour, I'll present another complex form complete with code to create an online survey.

Watch Out!

Do not use this example of an online store without implementing some kind of secure Web transaction, such as https. Consult your web server's documentation to set this up. Notice that this example doesn't contain any real personal information such as phone numbers or credit card numbers because hidden fields are just like regular HTML forms. No security is involved at all.

The first page of the online store, illustrated in Figure 23.1, presents a list of featured items from the store.

Figure 23.1. The first page of an online store.

When the user clicks the Go to Store button, the CGI program accepts the values from the form and then presents the full catalog, as shown in Figure 23.2.

Figure 23.2. Catalog of online store shown.

The second page presents the full catalog. When the first pagewith the featured itemswas submitted, the CGI program accepted the values, and then as it was printing the HTML for the full catalog, it placed the selected quantities for the featured items on the new form as hidden fields.

Each time the CGI program receives the values from the HTML form, the new page contains the old values in hidden fields, as well as the new values in the regular form elements.

In this way, you avoid the "forgetful librarian" problem. When the form for the full catalog is submitted, the hidden fields in the form remind the CGI program which items were selected from the first form, as well as from the current form.

If a third page is needed, the values from the first two pages can be squirreled away on the third page as hidden fields, as shown in Figure 23.3.

Figure 23.3. Shipping info for online store.

You should be aware of some problems with hidden fields on an HTML page. First, the values in the hidden fields can be seen by anyone. To see the values, users can simply view the HTML source for the page; most Web browsers have an option for viewing the source.

Second, the values in hidden fields can be changed by remote users. Remote users can use a doctored Web browser or can submit the form manually using HTTP. For example, the online store should not store the prices in hidden fieldsonly the quantities. The CGI program should look up the prices on the server side as they are needed for display.

By the Way

When you're designing forms, take a look at how other people design theirs. This way, you learn whether they're using hidden fields to preserve information. Most Web browsers have a View Page Source selection. You should use it on any form you find particularly interesting to see how it was put together. Do not copy the form, however. Most of the time copying violates the original author's copyright.

    Previous Table of Contents Next
    © 2000- NIV