HTML: frames and forms

Required Reading

References:

  1. interactive HTML tools
  2. HTML Tag lists
  3. HTML Specifications


Frames

A Frame Page is an HTML page that is constructed by creating a table where each cell of the table is a separate HTML page.

In place of a body element, one uses a "frameset" element and the attributes of the frameset tag specify the sizes of each of the rows and columns.

Inside the frameset element one specifies each of the HTML pages (called frames) and provides both a name of the frame and a web address. For example the following HTML specifies a frame with two rows, each containing three columns. The first row contains three browsers, with google getting the largest share of the window (80%). Click here to see this frame.

<html> <head><title>simple demo</title></head> <frameset rows="70%,30%" cols="10%,80%,10%"> <frame name="excite" src="http://www.excite.com"> <frame name="google" src="http://www.google.com"> <frame name="altavista" src="http://www.altavista.com"> <frame name="databox1" src="default.html"> <frame name="databox2" src="default.html"> <frame name="databox3" src="default.html"> <noframes> <body> .... </body> </noframes> </frameset> </html>

Framesets can also be nested. For example, in place of a frame element, you can use a frameset element.

HyperLinks in Frames

One of the most common uses of frames is to have a navigation bar on the side of the window. When you click on links in the navigation bar the main window goes to that page. This is made possibly by using the "target" attribute of the "a" tag. By specifying a frame name as the target, the hyperlink causes that frame to go to the specified URL.


Forms

Forms provide a method of collecting information from the user and sending it to the server. We will see later how to store this information in a database on the server and later to retrieve it and process it. For now, we look only at building the forms to collect the information.

The key idea is to create a form element which contains general html and also contains the following control elements

Sending forms by email

The simplest way to use a form is to have the data the user enters sent to your email account. This is accomplished by using a "mailto:EMAILADDRESS" url as the action attribute of the form tag. For example, the following form solicits some information from the user and then emails it to my account. To see the generated page click here

<html> <head><title>formdemo</title></form> <body bgcolor=lightgreen> <h1>Form Demo</h1> <form method=post action="mailto:tim@cs.brandeis.edu"> <center> <table bgcolor=#aaaaff border=5> <tr> <td>Name</td> <td> <input type=text name=name></td> </tr> <tr> <td>Year</td>< <td> <select name=year> <option> 2002</option> <option> 2003</option> <option> 2004</option> <option> 2005</option> <option> grad student</option> <option> staff</option> <option> faculty</option> <option> other</option> </select> </td></tr> <tr> <td> Comment:</td> <td> <textarea name=comment rows=5 cols=40></textarea> </td></tr> <tr><td colspan=2><center><input type=submit></center></td></tr> </table> </center> </form> </body> </html>
When the user pushes the "submit" button, the data from the form is collected and sent in coded form as an email. When I filled out the form and sent it, I got the following email a fraction of a second later:

Message 153/153 From Tim Hickey Sep 10, 01 08:22:11 AM -0400 Return-Path: <tim@cs.brandeis.edu> Sender: tim@brandeis.edu Date: Mon, 10 Sep 2001 08:22:11 -0400 Organization: Computer Science Dept./ Brandeis Univ. X-Accept-Language: en To: tim@cs.brandeis.edu Subject: Form posted from Mozilla name=%22Tim+Hickey%22&year=faculty&comment=This+is+an+%0D%0Ainteresting+test.%0D%0AI+wonder+if+it+will+work%3F%3F%3F
Notice that the content of each form component is coded using "+" between each word. Also, characters which are not letters or digits are encoded using the %XX form, where XX is the hex representation of the ascii code of the character. Thus %22 corresponds to the double quote ". The full ASCII chart is available here