SysAdmin Solutions

Tips for Handling Tasks

HTML Forms for Business on the Web

[Sidebar]: Creating a Simple Home Page Form

Adding a simple form to your home page can increase user interaction and produce valuable information about your customers.

To create dynamic Web pages that can capture and store information, it's necessary to design a form using additional HTML elements.
In October 1995, we looked at how to create a basic World Wide Web home page using the Hypertext Markup Language (HTML). Some of the more advanced capabilities of HTML can be applied to create a home page suitable for business needs. After all, being able to create a home page where interested parties can read your information is fine, but enabling visitors to provide feedback and interact with your home page--and ultimately your company--is of even greater value to your business.

We will look at some of the methods for creating Web pages to allow the user to enter and subsequently capture information for applications such as requests for information, being added to your mailing list, surveys, orders or just about anything else for which you want the user to provide you with information.

A standard Web page is by nature static. That is, the person reading your Web page is using Web browser software to interpret the HTML file you have created and placed on your Web server. The HTML document is simply called up on the server and delivered in a static, read-only fashion to the user.

To create dynamic Web pages for two-way communications that possess the capability to capture and store information, it's necessary to use additional HTML elements to design a form. Typically this is done by creating a script on the server, which is then executed by the Web server, which in turn creates the HTML document on the fly and delivers it to the user. Web scripts can be created in almost any programming language capable of reading from the standard input (keyboard), writing to the standard output (terminal) and accessing environment variables. Probably the most commonly used language for this is Perl, though C works well also.

Because the Web was originally designed as a one-way communications medium, a new protocol was invented that combines a number of elements to make two-way communications possible. The Common Gateway Interface (CGI) protocol is necessary for Web server and remote client to communicate with each other. The CGI protocol oversees the communication and transmission of data between the client on the Web server, the Web server itself and the script.

Creating a Form

We're going to create a simple entry form to collect information for mailing lists. In the process, we will ask a few simple questions to gather some pertinent information about the individual submitting the information request, as well as the specific product he/she is interested in. We are going to include standard fields like name, address, company name, phone number, fax number and e-mail address, along with some check boxes and a free-form area in which the user may enter other comments or suggestions that are not included on the standard form. If I were actually to publish this home page, I would add other HTML elements to the page, like underlines or solid bars to break up the presentation of the information on the page. (See UniForum Monthly, Oct. 1995, for information on using some of these elements.)

As we proceed, please refer to the numbered listing for our home page form document. We'll break it down to each of the new HTML elements or markup tags used to create the form. If you have access to Web browser software and have not created a home page, you can use the following to create an HTML document and see how the page would appear if published on the Web. For clarity here, HTML tags are displayed in uppercase letters. In reality, HTML doesn't care if it is upper- or lowercase. However, uppercase markup tags are easier to locate during editing.

In the first eight lines, we declare this as an HTML document. We also declare (and later undeclare) the initial header, the document title and a reverse hypertext link to this site's Webmaster, so the reader provides feedback on this particular Web page to whoever "made" it; this is generally a useful feature. The remainder includes a reference to a GIF file for an image and secondary header, Information Request, declared and undeclared with <H1> and </H1>.

Line 9 is the prelude to the interactive form section of the document, where the individual viewing this page will provide the information we want in order to be added to our mailing list. To use the necessary HTML markup tags for creating forms, though, we have to declare the portion of the document that contains the forms tags we will be using. Let's use the <FORM> and </FORM> tag pair to encapsulate the section of the document containing the interactive portion of the form. The FORM tag with the ACTION attribute in line 11 indicates what will be done with the form once completed.

Lines 12 and 13 use the real backbone of HTML forms, the INPUT tag or element. Additional attributes can be assigned to INPUT, including ALIGN for alignment left, middle or right; CHECKED to automatically check a checkbox without input from the user; MAXLENGTH to indicate the maximum length of an input field; NAME to assign a variable name to the INPUT field; SIZE to specify the size of the input box (if the MAXLENGTH is greater than the SIZE, the text will scroll in the box) and TYPE. The most commonly used values for the TYPE attribute are text for textual information, password for password entry, checkbox for a box to be checked off, radio for a radio button, submit to submit the form for processing and reset to clear all entries on the form and reset any checkboxes, radio buttons, and so on to their original default values.

In these lines we use two checkboxes to determine the type of information the user would like, general or new products. The first checkbox uses an additional tag called CHECKED, which will automatically present the box as being checked. By doing this, we arrange for the person responding to this page to be sent general information on the company without having to check the box.

New Product Information

Lines 14 through 21 ask what information on our new products the user would like. If the user checks the New Product box, a pop-up list is presented next to the italicized line (the and tags), asking, "What new product information would you like?" Let's look at how to implement the pop-up list under HTML.

This list begins on line 15, with a net HTML tag called SELECT followed by four available options for the SELECT tag, as indicated with the OPTION SELECTED tags. However, I've added two more options to the SELECT tag: SIZE and MULTIPLE. Without these tags, the pop-up list would simply appear and allow the user to select only one of the items presented on the list. By using the SIZE option, a window pops up with the only the first two items from the list. However, a scroll bar is also displayed, allowing the user to scroll up and down through the list. In this example, the list of only four items could be displayed easily on the screen; with a longer list, this would become an important feature. So, other than a window with only two items and a scroll bar, SELECT is essentially unchanged.

With the addition of the MULTIPLE option comes a change in the behavior of the pop-up list. When MULTIPLE is included with the SELECT tag, the user can select more than one item from the list. By clicking the mouse on one of the options and then moving the mouse up or down the list, multiple options can be selected. We complete this section with the </P> or paragraph tag to create a new line.

We could also have used multiple radio buttons or checkboxes, but for larger lists that would get cumbersome. One drawback of using the SELECT tag, however, is developing the necessary code to parse multiple values with the same names into individual data elements. To my knowledge, HTML does not provide an elegant method of breaking down the data stream. As such, you will need to handle this in your back-end script or program.

Capturing the User

Lines 22 through 33 use a series of named INPUT elements to capture the information we need to add a person to the mailing list. When using named INPUT elements, the value assigned to the NAME attribute is a key to the proper operation of your form, as it provides a unique identifier to the information to be contained by INPUT. Just as variables in a program should be unique, so should the named SELECT elements. If they are not, you end up with a routine that continuously writes new data over the old, negating any value to the data collected.

The name assigned to the named INPUT is arbitrary and could be just about anything. I prefer to use names that are easy to remember and which could be used in developing a database schema for eventual importation into a database.

In each of the above INPUT elements we also define a SIZE attribute for each, along with assigning a name to be displayed to the user--First Name, Last Name, and so on. Finish each line using the
<BR> element, which creates a new line and also white space by adding a blank line to the document, giving additional separation to each line for readability. Again, we complete this section with the </P> or paragraph tag to create a new line.

The final section of this document, lines 34 through 44, allows the user to input additional comments. To accomplish this, we use the <TEXTAREA> and </TEXTAREA> tags. As with the names assigned to INPUT elements above, we assign a unique name to TEXTAREA to capture the data.

We begin at line 34, with the text "Comments" displayed, followed by the <BR> tag. Next, the TEXTAREA tag defines our text variable, called simply "text," finishing with a ROW and COLS definition to display a box for the text that will be 8 lines long and 60 columns wide. (For future use, please note that, although you have defined a text box that is 8 lines by 60 columns, there is no limitation on how much text one can actually enter into the box. Therefore, when you are implementing your program or script to parse and capture the data, be sure to create a field to capture more data than the text box can.)

Next, lines 37 and 38 use the submit and reset input types to either clear and reset the forms default values or submit the form for processing. The form is now complete, so in the remaining lines 39 through 44, use the </FORM> tag and sign the form with your e-mail address. Note &lt and &gt at the beginning and end of the address. These are special insertion codes to insert specific characters into the document. If used, they are followed by a semicolon to indicate the end of the insertion code. In this case, the "less than" and "greater than" symbols will surround the address text.

We finish with a hypertext anchor and link back to the home page using an anchored image. To compete the page, we contain our original declarations of the document body and the document itself.

This is just a starter on using HTML forms for creating interactive forms. There is a great deal more you could do. Further, by using a shell script, C program or Perl routine, you can easily capture the information and ship it off to your database.

Glenn K. Schulke is president of Open Technologies, Inc., a systems integrator specializing in software integration services, located in Tempe, AZ. He can be reached at