What are Forms?

A form is a way for other people to easily give you information. It’s a lot like a paper form. Usually, forms go through a special web program called a ‘CGI’ that takes the form data, formats it, and sends it to you. Ask your web service provider if they have any generic forms for you to use. If they don’t, you’ll have to have the results of the form e-mailed to you.

The Form Tag

Forms get marked just like anything else in HTML. You need to surround your form with the <form> tag, as in:

<form method="post" action="/cgi-bin/GenericEMailForm.cgi">
<em>the text of the form</em>
<input type="submit" value="Submit This Form" />
</form>

The form tag has two attributes: method, and action. The method has to be post. There are other methods, but <em>post</em> is the standard. You’ll almost never need the others.

Action

The action attribute tells the reader’s web browser where to send this information. You can send it to an e-mail address, or you can send it to a special web-based computer program. If your web service provider doesn’t have a generic computer program for you to use, you can just specify your e-mail address: mailto:username@wherever.

<form method="post" action="mailto:username@domain">

Replace username@domain with your full e-mail address.

What can forms ask for?

Forms ask for input. And they do it with--guess what?--an input tag:

<input type="input type" name="input name" value="default value" />

The input type describes how you want the data to be entered. You can have the following input types. The “name” of your input type can be whatever you want.

There are two other ways of getting data that don’t use the input tag:

And there are two control ‘buttons’:

You have to have at least one ‘submit’ button for each form, or your reader won’t have any way to send you the form info once they’ve filled it out! Be careful with the “Reset” type, as it makes it very easy for your users to mistakenly erase all of their hard work!

The input tag has a ‘name’ attribute and a ‘value’ attribute. The name is the name of the form field when it gets returned to you. The value is the default value of that form field. If you have a checkbox with the name ‘Computer’ and value ‘IBM-PC’ in your form, and the reader checks that box, you’ll get the result

Computer=IBM-PC

when the form is mailed to you. You might even have more than one ‘computer’ checkbox that the reader can check, resulting in a set of results:

Computer=IBM-PC 486&Computer=Macintosh IIcx&Computer=Newton 100

Yes, this looks pretty ugly. Forms weren’t really designed to be e-mailed. For better results, find out if your web service provider has a default generic form CGI.

For the text input type, the value is the text that the reader types into the box.

Checkboxes

You use checkboxes to allow the reader to select any number of options from a list of options. On a graphical interface, checkboxes are boxes that the reader can ‘check’ by clicking the mouse.

<input type="checkbox" name="Anonymity" value="Yes" />Would you like to remain anonymous?<br />

<input type="checkbox" name="Computer" value="IBM 486" />I have an IBM ‘486<br />

<input type="checkbox" name="Computer" value="Macintosh IIcx" checked />I have a Macintosh IIcx<br />

<input type="checkbox" name="Computer" value="None of the above" />I don’t have any of those.<br />

<input type="checkbox" name="Computer" value="None" />I don’t have a computer.

This will produce checkboxes that allow the reader to select any number of computer types. When you type this in, you will notice that the Macintosh IIcx option is already checked. That’s because we included the checked option inside its input tag. You can pre-check as many checkboxes as you want. The reader will have to uncheck those if they don’t want them checked.

Radio Buttons

Radio buttons are like checkboxes, except that only one radio button can be selected in any group of radio buttons. You might have the reader select what fruit they want you to throw at them, and what brand of whipped topping they want in their face.

<input type="radio" name="Fruit" value="Orange" />Squishy Orange

<input type="radio" name="Fruit" value="Apple" checked />Rotty Apple

<input type="radio" name="Fruit" value="Banana" />Infested Banana<br>

<input type="radio" name="Topping" value="Reddi-Whip" />Reddi-Whip

<input type="radio" name="Topping" value="Cool Whip" />Cool Whip

<input type="radio" name="Topping" value="Cheez Wiz" />Cheez Wiz

<input type="radio" name="Topping" value="TV Brand" />TV Brand Whipped Topping

The above html code will create radio buttons for “fruit” and “topping”. Your users will only be able to select one fruit and one topping.

The reader can only select one fruit and one topping at a time. The Rotty Apple fruit is the default--it’s preselected with the checked option. Since only one radio button can be selected at one time, you should only preselect one button in any group.

The web browser knows what group each button belongs to by the name: each “fruit” button has the name “Fruit”, and each “topping” button has the name “Topping”.

Lines of text

You’ll often want the reader to fill out some sort of text: their name or their e-mail address, for instance.

Please tell us your name: <input type="text" name="Name" /><br />

Please tell us your e-mail address: <input type="text" name="E-Mail" />

The value of a “text” input type is whatever the reader types into the box. So if you use the value attribute here, that value is displayed as the default, which they can edit or replace. You can also specify the size and the maximum length of the line. The size is the width of the displayed box, and the maximum length is the maximum number of characters the reader can type in.

Please tell us your zip code: <input type="text" name="Zip" value="49421" size="5" maxlength="5" />

Accepting lots of text

The input type of text only accepts one line of text. If you want to accept lots of text, you’ll need to use the textarea tag. You can control the height (rows) and width (columns) of the <em>textarea</em> with the ‘rows’ and ‘cols’ attribute.

The textarea tag is a normal html tag; you have to surround the default text with the <textarea> tag:

<textarea name="Essay" rows="4" cols="30">
Please type your essay here.
</textarea>

And the reader sees a box with four rows and 30 columns that they can type multiple lines into.

Selecting from lists

When there are large numbers of options to choose from, a collection of radio buttons can get unwieldy and completely fill up your page. The select tag produces a pull-down menu of choices. The marking resembles lists, in that you have one tag to surround the selections, and another tag to mark the beginning of each selection:

<select name="President">
<option>George Washington</option>
<option>John Adams</option>
<option>Thomas Jefferson</option>
etc.
<option selected>Abraham Lincoln</option>
etc.
<option>James Earl Carter, Jr.</option>
<option>Ronald Wilson Reagan</option>
<option>George Herbert Walker Bush</option>
<option>William Jefferson Clinton</option>
</select>

Go ahead, mix and match your dream ticket!

Normally, the first item in the list (George Washington, in this case) is the default selection. You can specify any one of the items as the default by adding the attribute selected after the option tag, as we did here with Abraham Lincoln.

Sending it all in

You’ve got two other ‘buttons’ that can be used to control the form. You have to have a submit input type (unless you don’t want anyone sending the form anywhere useful) and you can also have a reset input type. The submit type is a button that, when pressed, sends the form back to you. The reset type allows the user to re-set all the form values back to their defaults, if they want to easily start filling out the form from scratch.

<input type="submit" value="Submit This Form!" />
<input type="reset" value="Erase What You Said!" />