Introduction to Forms

As you have explored the web, you have certainly encountered forms in some way or another. Search engines, guest books, comment pages and online surveys are all different kinds of forms. In fact, any time a Web page asks you for information which is used to customize the page, you have most likely used a form.

Forms are basically collections of data entry fields like checkboxes, radio buttons, text boxes, etc. that ask for information from visitors to a page. When the visitor presses a "submit" button, all of that information is then collected and used by a program for some purpose. Search Engines take keywords and generate lists of relevant pages. Guestbooks take entries and update a long HTML page. Comment forms usually send the comments to administrators via email.

Today, you will learn how to create a form which collects some sort of information from the people who visit your web page and then sends it to you via email. Later in the course, when you learn a programming language, you may be able to write programs to interpret the collected data instead of just sending it to you.

Here's a sample form that shows all of the different form components you can use:

Text Field: Try typing in this password box:
Check out this checkbox: RadioButton 1: RadioButton 2: RadioButton 3:	This is a <select> menu You can choose one of the options The chosen option will be submitted The <option> tag makes options. This is a text area.<br><br>

Just as tables must be surrounded by <TABLE></TABLE>, everything in a form must go between <FORM> and </FORM>.

The <FORM> tag has several mandatory attributes:

• METHOD - This specifies the method in which the collected information is transmitted to the program that will interpret it. You will always use:

  METHOD="post"

• ACTION - This specifies the program which will interpret the data that your form collects. In our case, this will be a program on the Princeton Web server which reads in the data and sends it to you via email. You should therefore use:

  ACTION="http://www.princeton.edu/cgi-bin/Princeton/mailform?userid@princeton.edu"

  where userid is replaced with your User ID.

Thus your form should always begin with:

<FORM METHOD="post" ACTION="http://www.princeton.edu/cgi-bin/Princeton/mailform?userid@princeton.edu">

(Replace userid with your User ID and type the entire ACTION tag on one line.) and end with:

</FORM>

Once you've opened your form, you can begin interspersing form elements with your HTML. All of the regular HTML tags will still work, and you can also add text fields, text areas, select menus, checkboxes, radio buttons and more.

We're going to give a quick explanation of how to use each item and then ask you to create a form on your web page that lets visitors sign in and tell you about themselves.

Text Areas let your visitors type in many lines of text, like this:

Here's the HTML code to create such a text area:

To create the text area, we first used the tag <TEXTAREA> to open it. As usual, we included the NAME attribute with a descriptive name that would help us identify it later.

Next, we typed in what we wanted to appear inside the text area. Since text areas are primarily for collecting information, you probably won't ever need to put anything inside and can omit that part. However, if you do want something to appear in the text area, note that each line of text you type appears on a separate line in the text area.

Finally, we typed </TEXTAREA> to close the text area.

The size of a text area can be set using the ROWS and COLS attributes to specify how many lines of text and how many characters per line should be displayed. For example, our original text area above can be made larger by using <TEXTAREA ROWS=4 COLS=30>

Text Fields

Text Fields are small, one-line text boxes which are useful for collecting information like names, email addresses, phone numbers, etc. Here is an example, along with the code used to generate it:

Text Fields, along with the rest of the components we'll cover, use the <INPUT> tag. Since the same tag is used for buttons, checkboxes and other components, however, we need to specify a type in the TYPE attribute. For text fields, that type is "text".

As usual, we gave our component a descriptive name, but there are two other attributes we may also wish to set:

• SIZE: this attribute controls how many characters long the visible text field will be. It does not prevent you from typing in more, but in our example the box will only be 15 characters wide, so the rest will scroll to the side.
• VALUE: this attribute can put a default string inside your text field. Just make sure that if your default string is more than one word, it must be enclosed in quotes.

Password Fields

Password fields are just like text fields, except that, for security reasons, every letter you type in one shows up as an asterisk. This prevents strangers from looking over your shoulder and discovering your password as you type it. When the form is submitted, the actual text typed will show up in the email next to the NAME of the password field.

Check boxes are exactly what they sound like -- little boxes which can be checked and unchecked by clicking on them. There are two different ways in which to use checkboxes in forms, however. The first example here is used for a group of unrelated questions:

In this case, you want a separate answer for each checkbox question. Each has its own name and when the form is submitted, each will each only be listed if it is checked. Notice that including the attribute CHECKED (without a value) in the second item's tag causes it to start out checked.

You can also use checkboxes to let visitors selected more than one option from a list. Look at this example:

In this case, the email submission would group all of these together under the name "classes". Instead of receiving a separate answer such as "mat103 = on" for each of them, you would get something like "classes = mat103, phi201".

Radio Buttons are a lot like checkboxes, except that only one can be selected at a time. Just like station buttons on old radios, when you push one, the one that was pushed before pops out. Try out this example:

Reset Buttons, when pushed, reset all the answers in a form to their original default values. Usually, one reset button will be placed at the end of a form, right next to the submit button. Here is an example of a reset button in a small form (with only one other component).

Don't be fooled by this example. Reset buttons will reset the values of every component in the same form (between the same set of <FORM></FORM>), not just one item.

The last form component we will show you is the Submit Button. It looks just like the Reset Button, but instead of resetting all of the answers, it submits them. When a visitor presses the submit button, all of the answers within the same form are collected and passed on to whatever program was specified in the ACTION attribute of the <FORM> tag.

Below is a Submit Button with no other components. This one doesn't actually do anything, but we've provided this example so that you will know what it looks like and how to include one in your forms.

As with Reset Buttons, the attribute VALUE is optional and will set the text message on the button. If you don't specify a VALUE, the button will usually just say "Submit" or "Submit Query".