Forms to get data from your readers

A form is one or more fields that visitors to a Web site can enter information into. The most basic form will send that information to you -- unformatted, all on one line -- by email. For anything else, you need to have a program that the form knows to send the information to. The program does with that information whatever it's supposed to do. Perhaps it just formats the input nicely and sends it on to you by email. Perhaps it adds it to a database. Perhaps it adds it to a Web page and anyone can read the list of comments by other readers. Perhaps it translates the input into a query in the query language of a database, searches the database, and translates the search result back into HTML and presents it to you as a Web page. The point is that you need a program on the server to do all these things. If you can't program or aren't allowed to put a program on the server, basically you can only have the form send you its input as email.

Most ISPs allow you to use a standard program that formats the input to your form and sends it to you as an email message, one field per line. This is enough for a surprising range of applications: requests for information, orders for merchandise, comments to your organization's staff. Even if you can't use that program, you can sometimes get around the problem, as we'll see.

The first thing you must tell the computer is that you are starting a form, and what you want done with the form data. The command to do this is:

<FORM METHOD="POST" ACTION="mailto:your email address">

The tag <FORM> ... </FORM> defines the start and end of the form.

The method used to send the data from the form to the server can be either "post" or "get". For an email form it has to be "POST" which should be written in upper-case letters (contrary to everything else in HTML which can be written in small or upper-case letters).

The action is the address where to send the data to. It must be either the URL of the program that processes the form, or mailto: and the email address to send the data to. An example of the former is: <FORM method="POST" action="http://www.mysite.com/cgi-bin/mailform>
An example of the latter is: <FORM method="POST"action="mailto:judyk@actcom.co.il">

this will usually send you the message unformatted, all on one line. You can sometimes get the mail program to format it by telling it to encode the message as plain text, like this:

<FORM METHOD="POST" ACTION="mailto:login@yourserver.net" enctype="text/plain">

Basics of writing a form

There are two main points to grasp about writing forms:

Every field has to have a name. When the information is sent to you by email, the formatting program writes the field name, a colon and a space and the field contents, and then starts a new line. Like this:
Name: Judy Koren
Address: Haifa, Israel
If the field doesn't have a name, you have no hope of understanding the output in any but the very simplest forms. And if the program does something other than send you email, it needs a name per field in order to know which field each piece of data is coming from, and therefore what to do with it.

If you want actual text to appear next to a field, you have to write it as you would in a normal page. Just because you've defined a field called "Name" doesn't mean the word "Name" will be written beside the field. If you want the user to know what s/he's supposed to write in the field, you have to say.

Once you've defined a form, you can scatter fields around in it at will. A form can contain any text including tables; but it can't include another form (you can't nest forms). If you want to scatter fields throughout your text, the best strategy is to define the form at any point before you need the first field, even at the start of the page; and end it with the </form> tag after the last field or at the end of the page. But if you only want one or two fields, put the <FORM> and </FORM> tags close to them for your own convenience (the browser doesn't care but it helps you understand what you've written).

For instance, in order to scatter examples of different fields throughout the text below, I defined a form right after the next heading, and closed it at the end of the page.

Writing a basic form: the <INPUT> field

<INPUT> defines an input field. These are the most common fields in a form, and can be of several types:

<INPUT type="text" name="YourName" value="default text to appear" size=40>
defines a single-line box 40 characters long, in which to type text. If a "value" is given, that text will appear in the box; if not, the box is empty. Like this:

Please enter your name:

<INPUT type="password" (etc.)> works the same, but doesn't display what the user writes (it usually displays asterisks instead).

If you want a multi-line text box, you use the <TEXTAREA> command, not the <INPUT> command (see below).

<INPUT type="radio" name="whatever" value="something">
defines a radio button, which looks like this:
Its value is sent to the server when the button is clicked. Again, you obviously have to write beside it what it means, for instance:

Age:   25-44:     45-65:

and so on. If you give two or more radio buttons the same name, you can only click one of them; clicking a different one removes the selection from the previous one you clicked. If you give each button a different name, you can select more than one of them. In the example above, obviously you want to prevent people from choosing more than one agegroup. So your field definitions might look like this:
<INPUT type="radio" name="age" value="25-44"> <INPUT type="radio" name="age" value="45-64">

But if your form said:

What do you want on your pizza?
Onion:    Tuna:    Olives:

you might well want to let the customer choose more than one. So the field definitions might look like this:

onion: <INPUT type="radio" name="want-onion" value="yes"> tuna: <INPUT type="radio" name="want-tuna" value="yes"> olives: <INPUT type="radio" name="want-olives" value="yes">

The problem with a radio button is that you can't remove the selection from it once you've checked it (or from multiple ones if you're allowed to check more than one) except by resetting the whole form. They were really designed for situations where you want to require the user to check one, but only one field. Thus our user can change her mind about whether she's 44 or 45 as often as she wants, but she has to check one of them. But if you want your users to be able to change their minds about multiple selections, you're better off using checkboxes:

<INPUT type="checkbox" (etc.)> works the same as a radio button, but produces a square in which you insert a checkmark when you select it, instead of a round circle in which you insert a black circle. Also, you can always check more than one checkbox in a group.

So to get this:

Onion:   Tuna:     Olives:

you just have to change type="radio" to type="checkbox" in the above example. The user will be able to change his mind about whether he wants both onion and olives on his pizza, or just olives.

And then, finally, he has to be able to send you the information...

<INPUT type="submit" value="Send it!">
produces a grey button with the words "Send it!" on it. Clicking the button sends all the form data to the server. If you don't give a value, the button has the word "Submit" on it. Like this:

The other button that's pre-defined is one to clear the whole form and start anew. That's <INPUT type="reset" value="Start over!"> and produces:

Usually you put them both together at the end of the form. They don't need a name.

Now go on to the next forms tutorial.