16. Forms

Now it's Time for Forms

Forms are much simpler than many people make them our to be. As you will see as we move through this tutorial. Forms will alow you to add interactivity to your web pages in ways such as a order forms, get feedback or whatever.

We can put anything we want in forms but forms will only work in a form.

Forms start and end with the form tags <form> </form>. So create a new page from your template, change the title to form and save it a form.htm.

In order for the information to be sent some we must tell the form how and where to send it. This is normally done through a cgi script. CGI stands for Common Gateway Interface, but we don't have one of those. So we'll start with a simpler method we learn in making hyperlinks call mailto. To your form tags add

Here is a list of the elements we'll cover in this section.

• Input Field
• Checked
• Button
• Label
• Selection List

We'll start with an input tag. Add the follow to your page, remember to stay in the form tags.

The tag we just used is an input tag. It has the attributes type, style and name. The type tell us what can be put in the box the input creates on the screen. The size set the size in characters the box will be, this is now the max the viewer can enter. The maxlenght could be used to limit the number of characters that could be entered, the default is 256. The name is used to read the infomation when we get it back.

Unfortunately the data will be sent to you in a format only useful to a computers.

FORMNAME=New+Entrant&NAME=R.U.+Havinfunyet&ADDRESS=1313+
Mockingbird+Lane&CITY=Beverly+Hills&STATE=CA

What you'll need is a program to turn it into format useful to a humans.

FORMNAME=New Entrant
Username=R.U. Havinfunyet
UserEmail=myemail@somewhere.com
UserTel=123-456-7890

Mailto Formatter is an excellent little freeware utility that does this job quite nicely.

OK, let's move on.

Check boxes and radio buttons serve about the same purpose except the viewer can check several check boxes but only one radio button in a group. So if the viewer may check only one chooice to answer your question use a radio button otherwise use the check box. In order to sort the infomation later when you get it back from the viewer be sure to give each form element a different name. That is except for radio buttons the way you group them is to give them the name.

For example if I want the ask what is your favorite season and in what season is your birthday. I might use eight radio buttons and could name four of them season1 and four season2. That way the viewer could only check one of each. However, if I wanted to and what sports you like I might use check boxes because you make like more then one sport. Let's try it. Add the following to your form.

Notice I added the checked attribute to the first button. With this attribute you can indecate which button is chosen by default and the viewer can still change it.

Now we'll try some check boxes. Add the following to your form.

Another way to give the viewer a choice of certain options is with selection box. Try using a selection box by adding th fellowing to your form.

There are a few of other attributes of the input tag we need to consider button, submit and reset. Each of these have only two values true or false, on or off, pressed or not pressed. The submit attribute sends the form. The reset clears the form and the button does whatever you tell it to. We'll check that out in just a mimute. First we need to finish the form we're on. So add the following to your form and we can get on to the fun stuff.

Your form should look something like this one.

Here's one of those fun things you can do with a form, a pulldown menu.

First we add some JavaScript to make it work, like this:

<script language="Javascript"> <!-- Hide from old browsers
function go() {document.location =
document.abcd.a.options[document.abcd.a.selectedIndex].value}
//--></script>

A function is just a small program we can call or activeate at any time. In this case we are telling the browser to get a location from the select tag in the form and take us there.

Then we build the form usint a select tag.

<form name="abcd">
<select name="a">
<option value="http://www.Netscape.com">Netscape
<option value="http://www.tripod.com">Tripod
<option value="http://www.geocities.com">Geocities
</select>

Finally we activeate the "Go" function using the on click method -->

<input type="button" value="Go" onclick="go()">
</form>

Here's the code altogather.

You can change the option values to fit your needs.

Have fun.

Tags covered in this section.
Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>
Input <INPUT TYPE="text,checkbox,radio,button,submit,reset" NAME="?" VALUE="?" SIZE=# MAXLENGTH=#
CHECKED (checkboxes and radio boxes)>
Button <BUTTON NAME="?" TYPE="submit,reset,button" VALUE="?"> </BUTTON>
Label <LABEL FOR="?"></LABEL>
Selection List <SELECT NAME="?" SIZE=? MULTIPLE></SELECT>
Option <OPTION SELECTED VALUE="?"></OPTION>
Option Group <OPTGROUP LABEL="?"></OPTGROUP>
Input Box <TEXTAREA ROWS=? COLS=? NAME="?" WRAP=off,hard,soft></TEXTAREA>