Part 1: Tables

There are two other tag pairs which can be used within tables:

• <TH></TH>     These tags can be used in place of <TD></TD> to create a table header cell. Header cells are just like regular cells except that all text is centered and bold. All the attributes of <TD> can also be used for <TH>.
  
  
• <CAPTION></CAPTION>     If you wish your table to have a caption, you can place these tags inside the <TABLE></TABLE> tags. Any text you type between <CAPTION></CAPTION> will be placed above the table as a caption.

Part 2: Forms

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 collected and sent to a web server, where it can be 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. In fact, any time a web page asks you for information, it likely uses a form.

Today, you will create a form that collects information from the people who visit your web page and sends it to you via email. Later in the course, when you learn a bit more Javascript, you can experiment with writing code to process the data before mailing it.

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.

Just as tables must be surrounded by <TABLE></TABLE>, everything in a form must go between <FORM> and </FORM>. There can be multiple FORM's in a page.

The <FORM> tag has two attributes that must be used if the form information is to be sent to a server:

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

  METHOD="post"

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

  ACTION="http://www.cs.princeton.edu/~bwk/mailform.cgi"

• This will be followed by another line that contains your netid, so the mailform program knows who to send the mail to:

  <INPUT TYPE="hidden" NAME="email" VALUE="your_netid@princeton.edu">

Thus your form will begin with

<FORM METHOD="post" ACTION="http://www.cs.princeton.edu/~bwk/mailform.cgi">
<INPUT TYPE="hidden" NAME="email" VALUE="your_netid@princeton.edu">

Once you've opened your form, you can begin interspersing form elements with your HTML. All of the regular HTML tags will 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 multiple lines of text, like this:

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

To create the text area, use the tag <TEXTAREA> to open it. As usual, include the NAME attribute with a descriptive name to help identify it later.

Next, type in what you want 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, type </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, the original text area above can be made larger by using <TEXTAREA ROWS=4 COLS=30>

Text Fields

Text fields are one-line text boxes that 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, you 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 you 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 more, but in our example the box will only be 15 characters wide, so longer text will scroll.
• VALUE: this attribute can put a default string inside your text field. 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 into one displays as an asterisk. This prevents someone 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 be listed only 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 select more than one option from a list:

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:

A Reset button, when pushed, resets 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 matching <FORM> and </FORM> tags), 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 component 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; if present, it sets the text message on the button. If you don't specify a VALUE, the button will usually just say "Submit".

Many of these effects are achieved by short programs ("scripts") that are written in a programming language called Javascript and included in the HTML text of a web page. In this section, we'll explore a small amount of Javascript so you can add some of these effects (preferably only desirable ones) to your web page. Learning this much Javascript will also be helpful when it comes to a couple of later labs that focus on Javascript.

Javascript is a simple language, and since it's part of the browser, you don't need to download any software or run any particular operating system to use it. There are many books and tutorials about Javascript if you want to pursue it further, or seek clarification of the sketchy descriptions here; Google for "javascript tutorial".

Advice: Programming languages are finicky about precise syntax, and if you make a mistake, your program may not do anything at all. If your Javascript isn't working, a syntax error might be the problem. As a partial solution, in Firefox, Tools / Javascript Console brings up a debugging window that might help identify some trivial syntax error.

The <SCRIPT> tag

Javascript in a web page is enclosed in <SCRIPT> ... </SCRIPT> tags that are analogous to other balanced tags like <B> ... </B>. Within this tag pair, you can write any amount of Javascript, ranging from a single line to many lines. Script tags can appear in many places within a web page; each one performs some action either when it is encountered as the page is loading, or when the commands within it are invoked by some event like the user pushing a button or moving the mouse to a particular region of the page, or when the page is exited.

One of the simplest Javascript commands, especially useful for debugging a broken script, is alert, which causes a popup window to appear with a message. If you put this sequence at the beginning of an HTML file, after <HEAD>, it will display a message when the page is loaded:

	<HEAD>
	<SCRIPT language="javascript">
		alert("we're about to load this page")
	</SCRIPT>
	...

Events

Javascript is probably most often used to respond to user activity like pushing a button, pressing a key, reshaping a window or moving the mouse into or out of a window or some part of one. Javascript code can be attached to specific components of a web page so that when such a user "event" occurs for that component, the code runs and does whatever actions have been specified.

As a simple example, you could add a button that causes an alert message to appear; this is an unlikely task but it illustrates how the mechanism works. Here's what it might look like:

	<form> <input type=button value="Hit me"
			onClick='alert("Ouch! That hurt.")'>
	</form>

Other events that you might use include onLoad, which occurs when the page is initially loaded, and onUnload, which occurs just before the page is exited, for example when the user pushes the "Back" button. onLoad occurs implicitly when the page is loaded, so you don't need to specify it directly; just add instructions to the <HEAD> part of the page, as we showed above.

onUnload is specified as part of the <BODY> tag, like this:

	<BODY onUnload='alert("bugging out")'>

You can open a new window by associating the command window.open(url) with an event like a button:

    <form> <input type=text name=url size=40 value="http://">
        <input type=button value="GO" onCLick='window.open(url.value)'>
    </form>

Properties

The location property is the URL of the current web page. You can cause a new page to replace the current one, as if you had selected a link, merely by setting location to a new value:

    <form> <input type=button value="Princeton"
        onCLick='location="http://www.princeton.edu"'>
    </form>

There's lots more that you can do with Javascript, but this is enough to at least give a hint of what's possible.

What you should do to your page

Add these Javascript embellishments to your page: An alert that says "Welcome to your name's web page" when the page is first loaded. An alert that thanks visitors for filling out the form (even if they didn't) when the page is exited. A button that says "Show my home page" and creates a new window with your home page when pushed. At least two buttons that change the background color to shades that you like, and one that restores it to white. The colors must be expressed in RGB in hexadecimal, not as names.