Building Online Forms to Gather Constructive Feedback

By CHRISTINE FREY

March 22, 2001 12 AM PT

clfrey@aol.com

How well your Web site meets users’ needs will determine its success. Forms, which allow users to send you feedback, can help you keep tabs on what they like and don’t like about your site.

Unless you have access to a form-processing application on your Web server, you will have to receive user submissions through e-mail. Such transmissions are not secure, however, so don’t ask visitors to submit personal information, such as credit card numbers, without a CGI-bin (Common Gateway Interface-binaries) server.

Forms can exist on their own Web pages or as part of larger HTML documents. Regardless, they will always appear within the body tag.

The form tag--which, as the name indicates, is used to create the form--requires three attributes: action, method and enctype. The action attribute indicates where the form submission will be sent--in this case, to your e-mail address. The method attribute determines how the information will be sent. The enctype attribute ensures that the Web browser encodes the submission so it remains intelligible during the transmission.

A simple form might begin:

With this tag, the Web browser will locate your e-mail server and send the data without encoding characters, making it easy to read.

Once you determine how your form will transmit submissions, you can create its controls, or data fields. There are several ways you can obtain information from your users: multiple-choice questions, scrolling or pull-down menus and text areas.

Most forms begin with short text fields asking for a user’s name and e-mail address. Using the input tag, indicate the type of control desired--in this case text--and size specifications. The following example will yield one text field that is 40 characters long and another that is 25:

Name:

E-mail:

The maxlength attribute added to the second input tag prevents the user from submitting an entry longer than 35 characters.

The input tag also can create more complicated, multiple-choice fields. Radio-button controls allow the user to select one option from a list using the computer mouse. To create them, change the input type to radio and add name and value attributes. Each option should have the same name, indicating that they are grouped; however, their values should differ so submissions can be sorted.

The code for a simple radio-button control might consist of the following:

Learning HTML is:

exciting

boring

easy

complicated

Include break or paragraph tags at the end of each option to separate them.

Whereas radio buttons allow the user to select only one option, check boxes allow for several responses. Utilizing the checkbox value, change the name of each option so that they are not part of the same group. With the following construction, a user can mark as many options as desired:

Learning HTML is:

exciting

boring

easy

complicated

You can pre-select an option for the user so that it appears checked when the Web browser opens the form, requiring the user to unselect it with the mouse. With the added checked attribute, the tag would automatically select the first option in the field.

Another multiple-choice field, which utilizes the select and option tags, configures pull-down menus and scroll bars. In the select tag, the size attribute determines the number of options displayed at once. Its default value is 1. If the multiple attribute is added, the field will take the form of a scrolling list. If it is omitted, it will appear as a pull-down menu.

The option tags, nested between the select start and end tags, should have the same values as the content they represent:

Learning HTML is:

When using the select control, you do not need to include break or paragraph tags after each entry.

Although such controls can solicit useful information from your users, you might want more specific feedback. Large text fields, which accompany a question or direction, allow users to submit lengthy written responses.

Using the textarea tag, you can give your field a name and specify its width and height:

What has been your experience learning HTML?

This tag creates a field that is 60 characters wide and four rows high. The text typed in the field will wrap within the space so the user can view it without scrolling from side to side. The browser maintains this formatting when sending the information to your server.

Like the select tag, textarea has an end tag.

While users can modify their entries by clicking on the various options and deleting text, you can include a reset button that will clear the form when selected. Within the input tag, set the type value to reset:

Once you have established the form’s content, you must create a way for users to send you their submissions. The tag will insert a button that transmits data to your server when selected.

Because mailto forms do not always notify users that their information has been sent, you might want to include some text at the end of your form assuring them that their submissions will be transmitted after clicking on the submit button. You can also add headlines, directions and other text throughout the form as you wish, following standard HTML code.

Finally, make sure to include the form end tag before finishing your document with body and HTML end tags.

Christine Frey is a freelance writer.

(BEGIN TEXT OF INFOBOX / INFOGRAPHIC)

Building Your Own Web Page

1. Picking the right provider

2. Understanding HTML

3. More HTML

4. Adding links, photos and graphics

Today: Creating forms

6. Using tables

7. Navigating with frames

8. Getting yourself found