Lab 5
Page 3


Forms


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 then 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.


What's in a form?

Here's a sample form that shows you 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:


The <FORM> tag

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:

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 tag on one line!)

and end with:
</FORM>

Adding components

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.

Selection Boxes

Selection boxes let your visitors choose one option from a drop-down menu, like this:

It is easy to see the uses that such an item could have. Here is the HTML code that created it:

What you write in HTML How it looks on your web page
<SELECT NAME="gender">
<OPTION> Male
<OPTION> Female
<OPTION> Undecided
</SELECT>

To begin, we used the <SELECT> tag. Notice the NAME attribute inside it. It is very important to give every form component a name using the NAME attribute. Whenever someone submits your form, you will receive an email listing all of their answers. For example, if you selected "Male" above and submitted the form, the email would include "gender=Male". If you don't name your components, then you won't know which answer goes with which question!

Next, we listed all of the options available. Although it is not necessary, you should probably list each option on a separate line to make the HTML more readable. Your selection box can have as many or as few options as you wish, as long as each is preceded by the <OPTION> tag.

Finally, when we were done with the options, we used the </SELECT> tag to close the selection box.

Text Areas

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

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

What you write in HTML How it looks on your web page
Questions/Comments:<BR>
<TEXTAREA NAME="comments">
I love this Web site!
</TEXTAREA>
Questions/Comments:

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:

What you write in HTML How it looks on your web page
Email:
<INPUT TYPE = "text" NAME="email" SIZE=15 VALUE="type name here">
Email:

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:

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.

What you write in HTML How it looks on your web page
Secret Code:
<INPUT TYPE = "password" NAME="secret" SIZE=5>
Secret Code:

Try typing in the password field above and notice the effect. You will probably not need to use this component very frequently, but if you do, you may use any of the attributes of text fields in the same way that you would use them for text fields.

Checkboxes

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:

What you write in HTML How it looks on your web page
I am a student:
<INPUT TYPE = "checkbox" NAME="student">
<BR>
I drive a car:
<INPUT TYPE = "checkbox" NAME="car" CHECKED>
I am a student:
I drive a car:

In this case, you want a separate answer for each checkbox question. Each has it's 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:

What you write in HTML How it looks on your web page
Which classes have you taken:<BR>
<INPUT TYPE = "checkbox" NAME="classes" VALUE = "mat103">
MAT 103 <BR>
<INPUT TYPE = "checkbox" NAME="classes" VALUE = "eng101">
ENG 101<BR>
<INPUT TYPE = "checkbox" NAME="classes" VALUE = "cos111">
COS 111<BR>
<INPUT TYPE = "checkbox" NAME="classes" VALUE = "phi201">
PHI 201
Which classes have you taken:
MAT 103
ENG 101
COS 111
PHI 201

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".

As with the above example, you can cause any of these to start out checked by including the CHECKED attribute.

Radio Buttons

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:

What you write in HTML How it looks on your web page
I like ice cream:<BR>
<INPUT TYPE = "radio" NAME="ice cream" VALUE = "lots">
A lot<BR>
<INPUT TYPE = "radio" NAME="ice cream" VALUE = "some">
Somewhat<BR>
<INPUT TYPE = "radio" NAME="ice cream" VALUE = "not">
Not at All
I like ice cream:
A lot
Somewhat
Not at All

Every group of radio buttons must share the same name. In your email, you will get one answer for that name which tells you which radio button was selected (e.g. "ice cream = lots" or "ice cream = some").

Reset Buttons

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).

What you write in HTML How it looks on your web page
Please enter a problem:<BR>
<INPUT TYPE = "text" NAME="problem">
Press this button to make it go away:<BR>
<INPUT TYPE = "reset" VALUE = "Poof">
Please enter a problem:

Press this button to make it go away:

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 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 "Reset".

Submit Buttons

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.

What you write in HTML How it looks on your web page
This is a Submit Button:<BR>
<INPUT TYPE = "submit" VALUE = "Submit Everything">
This is a Submit Button:

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".


Creating a Sign-In form for your Web page

Now that you have learned how to use each component, we'd like you to combine them all by creating a Sign-In form for your Web page. Basically, this is a form, like the one at the bottom of this page, which asks each visitor for his name, email address and other interesting information. Once you're done, you'll begin receiving email about everyone who visits your Web site!

  1. Create a Sign-In form on your "lab5.html" page with at least 5 data entry fields (places to input answers), and using at least 3 different kinds of components. Before you start, check out the tips and example below, but please do not copy the sample form we've provided.
  2. Once you've finished your form, load the page and try it out (check your email to see if you receive the correct message). You will be graded on this, so make sure it works.

While you work, keep the following tips in mind:

Here's a quick example to get you started. It uses a table to make an attractive little Sign-In Form:

What you write in HTML

<TABLE BORDER=5 BGCOLOR="silver">
 <TR ALIGN=CENTER>
  <TD>
   <FORM METHOD="post" ACTION="http://www.princeton.edu/cgi-bin/Princeton/mailform?userid@princeton.edu">
    <B>Name:</B> 
    <INPUT TYPE="text" NAME="name"><BR><BR>
    <B>Email:</B> 
    <INPUT TYPE="text" NAME="email"><BR><BR>
    <B>Please rate this page:</B><BR>
     <INPUT TYPE = radio NAME=rate VALUE=poor>
     Poor
     <INPUT TYPE = radio NAME=rate VALUE=ok>
     OK
     <INPUT TYPE = radio NAME=rate VALUE=good>
     Good
    <BR><BR>
    <INPUT TYPE="submit">
    <INPUT TYPE="reset">
    </FORM>
   </TD>
  </TR>
</TABLE>
How it looks on your Web page
Name:

Email:

Please rate this page:
Poor OK Good


PREVIOUS 1 | 2 | 3 | 4 | 5 NEXT