Lessons by Jon

Very Simple Form Explanation

The easiest thing to do with HTML documents is display your text files. In fact, if you're really lazy you could just put <PRE> at the start of every text file and </PRE> at the end and they would be somewhat valid HTML pages. In truth, there are times when this is the right way to do things, such as an archive of messages (although you really should add a header and BODY tags as well, just to be a good citizen).

The problem with that, though, is that there is no interaction for the user. Even adding hypertext links does little to enhance the interactive nature of your documents and most other tags (headers, lists, styles, etc.) do nothing at all to this end. And as for maps, let's face the facts - maps are just big complex links. They aren't any more interactive than any other hot text.

If you want to interact with your user, you need a way to get information, as well as present it. This is where forms come in.

Your Basic Form Elements

Below are samples of the various elements that you can use in forms to solicit information from your users. Note that while you can edit these elements (type in the text fields, toggle the check boxes), I'm not actually using this form to collect information. That's not until later. To see how this page was written, save this document as HTML text (or "source" on some clients).

Text Input Fields

The fields below will accept anything that can be typed from the keyboard. You can set a default length or have a scrolling field.

40 Character Field (text):

Large Text Block

A special option for fields is a password field. In this field, the text is replaced with bullets so that the password cannot be seen.

Please enter your MasterCard number:

Buttons

There are two kinds of input buttons. Checkboxes, like those below, are used when you want several or no possible options.

I like to eat (check all that apply): Pizza Hamburgers Chocolate Granola

Radio buttons, on the other hand, are used when one and only one option is desired.

I am: Under 20 20 - 29 30 - 45 46 - 65 Over 65

Selections

Selections allow you to present multiple, fixed options to the user. You can choose to display this as a pop-up or pull-down menu, which means that the user can only select one item or as a scrolling list, where the user can select several items, not necessarily contiguous.

Pick a card

Pick a card

Hidden Fields

You can place hidden fields in your form as well. These fields cannot be seen by the user, but their information is passed to the CGI application along with everything else. This is extremely useful for passing default information or state information (such as what form the data came from).

Submit and Reset

In order to send the data from a form to be processed, you must provide a "Submit" button. This button causes the client to process the form data and send it back to the server to be passed on to the appropriate CGI application. The button can have any name you want to give it.

Click this button when you are finished:

The "Reset" button causes the client to delete all of the selections the user has made. The server has no involvement in this. It is not quite the same as reloading the document. This button can also have any name you would like to give it.

Click this button to reset the form:

That is everything I know about form elements. As you can see, there are some things that haven't been implemented yet, like dials, slides, and such. But still there is very little you can't do with the existing elements.

What You Can Use Forms For

Here are some ideas for using forms: You can probably think of more, too. Just think how important it is that you learn how to use this feature of HTML! And how nice I am to explain it all to you (aw, shucks). Now you're ready to tackle the rest of it.

[Back to Forms Lesson][Back to CGI Lesson]

Jon Wiederspan
Last Edited: December 11, 1994