Home About Mailing Lists Meetings Newsletter FTP Locate File

Form & Function - Using Forms On the Web

Part 1 - Coding Forms In HTML

By Gilbert Detillieux, Computer Science, University of Manitoba, May 1996
Internet fever has reached an all-time high. The World Wide Web had been not only one of the biggest catalysts in popularising the Internet, but promises to be one of core technologies for individuals and businesses who are adopting the Internet as a communications medium. The easy-to-use interface of modern web browsers, and the attractive, multi-media content of web-based hypertext, make the web a good way of providing information for the masses.

However, this hypertext interface on its own has its limitations. It is still essentially a one-way communications medium, with producers on one side and consumers on the other. To be an effective business communications tool, there's a need for interaction. There's also a need to provide dynamically obtained, up-to-date information, rather than just static pages of hypertext. Fortunately, the web has evolved to meet these needs, with extensions such as fill-out forms, server-side processing, and most recently, client-side programming capabilities.

In this article, we'll look at how fill-out forms are done in HTML. Part 2 will look at the Common Gateway Interface (CGI), which lets you set up scripts to do server-side processing. Finally, Part 3 will look at Javascript, a new scripting language developed by Netscape, to do client-side programming, and processing of forms.

A Sample Form

Let's suppose we are managing a mailing list for the membership of some organisation. We now want to automate the task somewhat, by allowing applications, renewals, and address changes to be handled via the web. We could set up an electronic form to allow users to submit the data, then use a program of some sort on the web server that would process the data, and manage some sort of database. We'll start with the basics. 
<FORM METHOD="POST" ACTION="URL for CGI program">
... form input fields ...
</FORM>
A form in HTML is enclosed within FORM tags. On the opening tag, we specify an ACTION, with is usually the URL to invoke a CGI program on the server, which will process the form input data. We also specify a METHOD of either GET or POST, which indicates the way the form input is to be passed along to the server. (We normally use POST for any forms that will contain a fair amount of data; GET can be used for simple queries, where the amount of data is small.)

Since we'll only get to CGI programs in part 2, we'll use a different type of ACTION for testing our form: 

<FORM METHOD="POST" ACTION="mailto:gedetil@cs.umanitoba.ca">
Using a "mailto:" URL as an action may not be supported by your browser. Netscape introduced this extension, and others have since followed suit, but many browsers don't support it. However, mailing forms to yourself is a useful tool for testing out your forms.

Now we can put some input fields in the form. The simplest type is a one-line text input field: 

<b>Name <em>(your full name)</em> :</b><br>
<INPUT SIZE=40 NAME="fullname">
This sets up a text box which can display one 40 character line of text. The user will be able to enter and edit a string of more than that size, but only 40 characters will be visible at any time. The NAME you give is arbitrary, but you can think of it as a variable name for the input field (this analogy will be useful later).

An initial, default string of text can be included with the VALUE attribute on the tag: 

<INPUT SIZE=40 NAME="fullname" VALUE="Joe Blow">
Multiple lines of text input are also easily handled: 
<b>Address :</b><br>
<TEXTAREA NAME="address" ROWS=5 COLS=40></TEXTAREA>
This sets up a text box consisting of 5 lines of 40 characters. Scroll bars on the box allow you to view additional text, if it doesn't fit within the specified window size. You can also have initial, default text, by enclosing it between the opening and closing TEXTAREA tags.

In addition to text input, we may want to allow the user to select from a set of listed options. There are different ways to accomplish this, such as check boxes, radio buttons, and option menus. Here's an example of radio buttons: 

<b>Application for :<br></b>
<INPUT NAME="status" TYPE="radio" VALUE="New" CHECKED>New membership
<INPUT NAME="status" TYPE="radio" VALUE="Renewal">Renewal
<INPUT NAME="status" TYPE="radio" VALUE="Change">Address change<br>
Note that all three buttons have the same variable name; this is what makes them work together as a group, where only one can be selected at any given time. The "status" variable will take on the value associated with whichever button is selected when the form is submitted. You can use the CHECKED attribute to indicate the default selection.

Check boxes are similar, but have a TYPE="checkbox" attribute. The VALUE attribute is assigned to the field if the check box is checked. Of course, each check box should have a unique NAME attribute.

For longer lists of options, check boxes and radio buttons may not be appropriate. Option menus can be set up, either as pull-down menus or as scrollable lists, using the SELECT tag. I won't go into detail here, since it's beyond the scope of this article.

Finally, we need a couple special buttons on our form, to make it useful: 

<INPUT TYPE="submit" VALUE="   Submit Form   ">
<INPUT TYPE="reset" VALUE="   Clear Form   ">
The submit button is used to submit the form, i.e. to send it to the URL specified in the form's ACTION attribute. The reset button, which is not really necessary but is a nice touch, will clear all of the form's fields to their initial default state.

So, now we can put it all together, into a complete HTML document: 

<HTML>
<HEAD>
<TITLE> Membership Form </TITLE>
</HEAD>
<BODY>
<H1> Membership Form </H1>
Please enter all of the relevant information, then use the Submit button
at the bottom of the page.
<FORM METHOD="POST" ACTION="mailto:gedetil@cs.umanitoba.ca">
<b>Application for :<br></b>
<INPUT NAME="status" TYPE="radio" VALUE="New" CHECKED>New membership
<INPUT NAME="status" TYPE="radio" VALUE="Renewal">Renewal
<INPUT NAME="status" TYPE="radio" VALUE="Change">Address change<br>
<p><b>Membership Number <em>(if you're already a member)</em> :</b><br>
<INPUT SIZE=40 NAME="membnum">
<p><b>Name <em>(your full name)</em> :</b><br>
<INPUT SIZE=40 NAME="fullname">
<p><b>Address :</b><br>
<TEXTAREA NAME="address" ROWS=5 COLS=40></TEXTAREA>
<p><b>Phone <em>(daytime)</em> :</b><br>
<INPUT SIZE=20 NAME="phone">
<p><b>E-mail <em>(if applicable)</em> :</b><br>
<INPUT SIZE=40 NAME="email">
<p>
<INPUT TYPE="SUBMIT" VALUE="   Submit Form   ">
<INPUT TYPE="RESET" VALUE="   Clear Form   ">
</FORM>
</BODY>
</HTML>

Form Submission

Now, what happens when we press the submit button? All of the form's input fields are encoded into a special string, and passed along to the specified URL. In the case of our example, where we used the POST method, and mailed the results to ourselves, we would receive a message something like the following: 
From: "Gilbert E. Detillieux" <gedetil@cs.umanitoba.ca>
To: gedetil@cs.umanitoba.ca
Subject: Form posted from Mozilla
Date: Mon, 25 Mar 1996 10:39:15 -0600
X-Mailer: Mozilla 2.0 (X11; I; SunOS 4.1.3 sun4m)
X-Url: http://www.cs.umanitoba.ca/~gedetil/form/form.html
Mime-Version: 1.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 161

status=New&membnum=&fullname=Gilbert+Detillieux&address=123+Mulberry+Lane%0D%0AWinnipeg%2C+MB%0D%0AR3R+3R3&phone=%28204%29+555-1212&email=gedetil@cs.umanitoba.ca
The message body above is actually sent as one continuous line. The MIME-format headers tell us what to expect in the message body. The content type "application/x-www-form-urlencoded" is used for normal form data, submitted using the POST method. The content length indicates the exact length of the string to be read. This information is the same when the form is submitted to an HTTP server, and is available to to the CGI program.

The URL encoding of the form data is fairly easy to decode, at least for a program (it's tedious for humans to do). Each field is listed in sequence, with an "=" separating the field name from its value. These name=value pairs are separated from one another by "&" characters. Any spaces in the data are converted to "+" and any other special characters are encoded in hexadecimal and displayed as a 3-character string (such as "%2C" for a "," character).

Now that we know how the encoding works, we can extract the information from the form, and process it in a program. But, we'll leave that for next time.

Further Reading

A good, although brief, description of fill-out forms can be found at w3schools.com. W3.org also has a good description of forms.
This article first appeared in the May 1996 MUUG Lines. The current, slightly updated version can be found online here: https://muug.ca/tutorials/form1.html

This article is copyrighted by MUUG and the specific author(s). You are granted permission to duplicate it for non-commercial purposes only, provided it is not modified and includes this copyright notice as well as all author credits and attributions.

If you found this useful, you might also be interested in other MUUG tutorial articles. Or, why not find out more about MUUG? If you live in or near the Winnipeg area, why not check out one of our monthly meetings?

Home About Mailing Lists Meetings Newsletter FTP Locate File