Forms

Forms are used to allow the user to send us information. The form communicates with the server through a CGI (Common Gateway Interface) script. Forms send along name/value pairs of information.

Forms start with the <form> tag and its attributes; method and action.

  • method can have two values; GET or post. This example uses the post method.
  • action indicates the URL of the CGI script you are working with.

The code used for this form is:
<form method="post" action="http://art.wallyzone.com/cgi-bin/namevalue.cgi">

Remember to close your form after all your form elements - </form>.

Form Elements

Below are some of the form elements. Go ahead and fill them out for fun.

This input is the "text field." It is a one line text input often used for name and address fields in a form. The default size is 20 characters. You can vary that by using the size attribute.

How about putting your name in this field.
The "password field" replaces the user's input with bullets or asterisks. This prevents someone from looking over the user's shoulder to obtain the password. It does not necessarily encrypt the password, it can be stolen online.
Enter your password here.
Sometimes we need a larger text box, one that could contain user comments and that is larger than the single line text field. For that we use the textarea tag. Use the rows and cols attribute to size the height and width of the box.
Radio buttons allow the user to pick one item from a group of items. You may choose to have one of the buttons checked by default.
Select one of the following:
Female
Male
Unsure or Don't Care
Checkboxes allow the user to pick multiple items. You may choose to have one or more boxes checked by default.
Select as many as you like:
Spam me mercilessly.
Give me money.
Deluxe Vacation
An "A" in this class.
The "pulldown" or "pop up" menu allow the user many choices while the menu itself takes up very little space. Notice that the menu's width expands to your widest option's size.
Pick you favorite flavor of ice cream:
The multiple selection menu allows the user to pick more than one selection.
Pick more than one flavor (hold down the shift key or use the command/control key for multiple separated selections):
Hidden elements, at first glance, may seem to be a less than useful part of form. As you become more experienced, you may find yourself writing a series of forms that the user will be asked to fill out. hidden elements allow you to pass along data from previous forms, or perhaps identify a particular ad campaign or "partner."
Of course you can't see anything,
they are hidden elements. View the source!
Give your users a chance to start all over on a form by supplying a reset button. It can have any message you choose written on it. I usually make a point of separating the reset button from the submit button, especially on long forms. It is no fun for the user to fill everything out and then accidentally click on the reset button...
The submit button sends the user's data along. Like the reset button, it can have any message you choose.

Lets move on to exercise ten.

bottom graphic for DM 60A pages