How many times have you been surfing the Internet and run across a page that looks like Figure 1. You usually see them when you need to provide information to the other party in order to download software, order something online, participate in some kind of Web page discussion, etc. What you see in Figure 1 is called a form. In this installment, I will tell you how to create forms on your own page. It is surprisingly easy. However, building the form is not all there is to it. You must have some way of reading the data that a person enters in the form. This requires having a program on the server to read the data, parse it, and then do something useful with it. I will only discuss creating the form in this article. Next time, I'll discuss how to write a server-side program to read the data.
In Control
Before building your form, it is a good idea to decide exactly what information you want your Web page visitors to supply to you. As you can see in Figure 1, I wanted to know the person's name, city, state, country, Email address, gender, computer system, interests, whether they wanted to be informed about additions to my home page, and a comment. Once you have decided "what" you want, you need to decide "how" you will obtain it.
There are several controls available for allowing the user to provide information. I use all of the major ones in my survey page. The controls for entering names, city, state, country, and Email address are text controls. The gender input uses radio buttons. The computer system input is a drop-down list. The interests input is a scrolling list. The information request is a checkbox. The comments is a text area. Finally, the two buttons at the bottom are special controls called submit and reset. Pressing the submit button tells the browser to package up all the inputs from the other controls and send them to the server. Pressing the reset button tells the browser to reset all the controls to their default values.
Form Fitting
Once you have decided what controls you will use to obtain the information you want, you need to decide how you want to lay out the controls on your Web page. Remember, you will have visitors using many types of computer systems running many different screen resolutions. You don't want to create a form that runs off the right side of the browser window because you designed your form in a higher resolution than most of your visitors are using. So, what is the lowest common denominator? Nowadays, you can safely assume that a person is using at least a width of 640 pixels. Of course, they may have their font size set to something large, but for most people you can design with an average size font. It is not as critical to design the form to fit in a vertical space because people are used to scrolling down a page for entering data. Notice that I put more than one text input on a row when the entry boxes weren't too wide.
HTML Code for Forms
Listing 1 shows the HTML code that generated the page shown in Figure 1. You will see some familiar HTML tags that I have discussed in previous installments. However, most of the code is new. Just a few lines from the beginning of the listing there is a line that says:
<FORM METHOD=POST ACTION="cgi-bin/survey.cgi">
The FORM tag tells the browser that everything up to the closing </FORM> tag, near the end of the listing, should be treated as a form. The METHOD attribute specifies how the form data should be sent back to the server. At this time, only two methods are available: POST and GET. These will be discussed in the next installment. The ACTION attribute specified the name of a server-side program that will be used to decode the form. It too will be discussed in the next installment.
Notice that I have used the <PRE>...</PRE> tags around the entire form. These tags indicate that everything is pre-formatted text. Typically, a browser will use a fixed width font for this type of text. Also, end-of-line characters (line feeds in UNIX) will be interpreted in pre-formatted text whereas they are normally ignored, requiring break (<BR>) and paragraph (<P>) tags to be used to force a new line. Using a fixed width font is nice when laying out a form because you can depend on each character taking up the same horizontal space. When a proportionally spaced font is used, it is difficult to get entry fields to line up properly. Most forms I have seen use pre-formatted text, but if you insist on using proportionally spaced fonts, you can put your form controls within a table, using one or more columns for each control.
Input Controls
One type of control that is available for forms is an input control. There are several types of input controls. I use five of them: text, radio, checkbox, submit, and reset. The tag for these controls looks like this:
<INPUT NAME="anyname" TYPE=text/radio/checkbox/submit/reset other-attributes>
Each control should have a NAME attribute that identifies the control. The name will become extremely important when decoding the data passed back to the server. In the case of the radio button control, more than one should have the same name. Selection of a particular radio button is mutually exclusive with all of the other radio buttons with the same name. Thus, you can have several groupings of radio buttons that each share the same name. It is possible to scatter the radio buttons sharing the same name all over the page. However, in practice, you should group them in some way so that it is obvious to the user which buttons are mutually exclusive with the others.
The type of input control is specified by the TYPE attribute. It can be text, radio, checkbox, submit, or reset. Several other types are available, but I will not be discussing them here.
Each control also has a value that will also be passed back to the server along with the control name. For a text control, the text typed by the user in the entry field is its value. If you specify a VALUE="some-text" attribute for a text control, the value will be used as the default text in the field. In the case of radio buttons, the value to be passed back must be entered as an attribute to the INPUT tag. Notice that the values for the gender radio buttons are Male and Female. For a checkbox, the value is either true or false. The value attribute for a submit control is the text that will appear on its button and the value that will be passed to the server when it is clicked. The reset control can have a value also, but it is only used as the text on the button. There is no need to pass a value for it back to the server since it is a special purpose control for resetting all the other controls back to their default values.
The text controls can have two other attributes: SIZE and MAXLENGTH. The former specifies how many characters wide the text entry field should be. The latter specifies how many characters the user can enter in the field. These two values can be different. If MAXLENGTH is bigger than SIZE, then the text will scroll within the entry field if necessary.
Radio buttons and checkboxes also have a CHECKED attribute available. It indicates that the control should be selected by default. For a group of radio buttons, only one should have this attribute.
You should always put some text near an input control to let the user know what information is expected. Typically, this text appears to the left or just above a text control and to the right of a radio button or checkbox.
Select Controls
Another type of control my survey page uses is a select control. This control presents a list to the user and allows item(s) to be selected. The values to be presented in the list are preceded by the <OPTION> tag. Any number of these options can be placed between the <SELECT>...</SELECT> tags. A NAME attribute is necessary to identify a select control.
Two other attributes are available for select controls: SIZE and MULTIPLE. The SIZE attribute specifies how many of the option items should be displayed at once. My interests select control has a size of five. You can see in Figure 1 that this is how may items are shown. The items are presented as a scrolling list. If a size is not specified, as with my computer system control, then the items are presented as a drop-down (or pop-up) menu. The MULTIPLE attribute tells the browser that more than one item in the list can be selected. I use this for my interests list.
TextArea Control
The last type of control I use in my survey form is a textarea control. This is the control that appears near the bottom of the page for comments to be typed in. The textarea control uses a paired set of tags, <TEXTAREA>...</TEXTAREA>. As usual, it should have a name attribute assigned. Two other attributes, ROWS and COLS, specify how may rows and columns of characters should be provided in the text entry area. (NOTE: I have chopped off some of the rows of this control in Figure 1 in order to fit all the controls on one screen grab.) If any text appears between the beginning and ending tags, it will appear as the default text in the entry area.
Closing Comments
As I mentioned earlier, all of the control names and values are passed to a program on the server as specified in the <FORM> tag. This data is encoded in a special way and must be decoded by the server-side program. Next time, I'll show you how to do this. In the meantime, check out my home page at http://fly.hiwaay.net/~rcfinch and fill in my survey.