Basic Forms?

The form page outlined below is very basic. It will create a very basic form for you and it will send information to you. There are two steps to creating forms:

1. You have to create how the form appears on the page and
2. You have to tell the form what to do

The First Step

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 or tag for form is <form> and has some necessary arguments as follows:

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

Notice the command did three things:

1. It told the computer a FORM was starting.
2. It stated the METHOD of dealing with the form is to POST it.
3. And the data should be posted to your e-mail address through the "mailto:" ACTION.

Remember you will need to put your e-mail address immediately after the "mailto:" without a space! This is where the results of the form will be sent.

Now that the computer knows a form has begun, it's looking for any one of a number of form styles to deal with. I will go over five here:

1. TEXT
2. TEXT AREA
3. RADIO BUTTON
4. CHECKBOX
5. POP-UP BOX.

These are by far the most used on the WWW. Also, I will go over the creation of buttons that send the form to the "mailto:" address or clears the form.

Boxes for Entering Text

1. The Text Box

The command to place it on the page is this:

<INPUT TYPE="text" NAME="name" SIZE="30">

• INPUT TYPE: This form type is "text".
• NAME: is the name you assign to the box. Remember that this is a form that will be sent to you through the mail. When you receive the mail, it won't be just like the page. Only the text will arrive, so you have to denote what each piece of text will be. When the mail arrives from this text box, it will say:
  name=(whatever is written in the box)
• SIZE: denotes how many characters long this box will be.

2. The Text Area Box

This is a larger box, like the one above, that allows your reader to write something. The difference between the Text Box (above) and the Text Area is that the Text Box only allows for one line. The Text Area, however, allows for mutiple lines.

Here's the command for textarea:

<TEXTAREA NAME="comment" ROWS="6" COLS="40">
</TEXTAREA>

Please note that the TEXTAREA requires a </TEXTAREA> command, whereas the TEXT BOX command above did not.

• TEXTAREA (all one word): This tell the browser we have another form item. This one will be a text area box.
• NAME: is the same as before. The information the reader puts in this box will arrive in your e-mail box denoted by whatever name you use. In this case, what is written in this box will arrive in your e-mail box with the words, "comment=".
• ROWS: tells the computer how many rows of text it will accept, and...
• COLS: tells the computer how many characters will be in each row. This text box will accept 6 rows of text each being 40 characters long.

Input Buttons

3. The Radio Button

This places a circle on the page. That circle is active and a reader can use the mouse to click on it. When the radio button is chosen, it darkens. Here are three radio buttons:

Red
Green
Blue

When you use radio buttons, only one can be checked. When another is checked, the first one gives up its selection.

The reason they are called radio buttons is that they act as the radio buttons used in older car radios. When you pushed one, the dial moved. When you pushed another, the first choice was dropped and the dial moved again.

Here's the command to place a radio button on your page.

<INPUT TYPE="radio" NAME="heading of button" VALUE="button name ">

• INPUT: This tells the computer this is another form element.
• TYPE: This tells the computer what type of form item it will be. In this case, it's a radio button.
• NAME: This names the category the button is in on your form page. for example, Let's say you have three different choices under one heading like three colors all under the heading, "Favorite colors." "Colors" would be the category. It's the heading of the group of radio buttons.
• VALUE: is the name assigned to the button. Like in the example above, you have three buttons each labeled with three different colors.

4. The Checkbox

1. The item it places on the page is square and it is marked with a check when chosen.
2. You can check as many as you'd like.

Red
Green
Blue
Orange
Yellow

You'll note that just one or every one can be chosen. This checkbox is basically a fancy radio button. Here's the command that placed the checkbox on the page:

<INPUT TYPE="checkbox" NAME="heading of button" VALUE="button name">

Each of the items mean the same as above so there's no need to go over them again. Please note, however, the TYPE is now "checkbox" instead of "radio."

Remember that when the text from a checkbox arrives at your e-mail box, more than one can show up. With radio buttons, only one item under the NAME heading will arrive. With checkboxes, every item can be checked, thus every item can arrive.

The Pop-Up Box

5. The Pop-Up box

Unless clicked on, the pop-up box only shows one item. The arrow in the box denotes more choices - you have to click on it to see all the choices.

Here are the commands that placed the Pop-Up box on the page:

<SELECT NAME="Favorite_Color" SIZE="1"> <br>
<OPTION SELECTED>Blue <br>
<OPTION>Red <br>
<OPTION>Yellow <br>
<OPTION>Green <br>
<OPTION>Black <br>
<OPTION>Orange <br>
<OPTION>Purple <br>
</SELECT>

Although this looks a little bit more involved, it really isn't.

• SELECT: tells the computer another form is going here. This time it's a SELECT or Pop-Up form.
• NAME: Same as above. This is the heading of the form item. It denotes how the results will arrive at your e-mail box. In this case it will say; "Favorite_Color=" and then the reader's choice.
• SIZE: denotes the size of the box. Here, 1 means one line or item is shown. Try putting two there if you'd like to see what it does. More than one item tends to defeat the purpose of the Pop-Up Box.
• OPTION SELECTED: denotes which option will appear in the box. Note on the page that "Blue" is visible. You do not have to have the first item in a list be the selected item.
• OPTION: denotes another choice that will be visible when you click on the item.
• /SELECT: finishes off the entire deal.

Send and Reset Buttons

Well, now that the you have placed all the form items you want on your page, you need a way to have the results sent to your e-mail box (or wherever you said this would go in the original form statement).
This may be the easiest of all the items I've shown on this page. Here are the buttons:

The buttons are active and will attempt to work -- however, I have put in a false e-mail address. Also, if the workstation you are at is not configured with a local email client - like Microsoft Outllook, it will attmept to install/configure Outllook.

And here are the commands to put the buttons on the page:

<INPUT TYPE="submit">
<INPUT TYPE="reset">

When you click on the buttons, the form will enact the ACTION you noted in the original FORM command. Here it would have been mailed to my e-mail box (or not, in this case).

That's a beginning on forms, but there is so much more you can do than what I have here. There are forms you can connect to other PHP, CGIs (Common Gateway Interfaces), databases, or other data collection devises. All I wanted to do here was give you a very basic, very easy form for you to use on your Web pages.

A Simple Form using Mailto:

A Simple Form using PHP

Home	Previous	Next