HTML: frames and forms
Required Reading
References:
- interactive HTML tools
- HTML Tag lists
- 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.
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.
- Regular hyperlinks just cause the contents of a given
frame to change to the specified page.
...
- Specifying the target of the link to be
_top
causes
the entire frameset to be replaced with the specified page (This is
how to implement the "no frames" link)
...
- Specifying the target of the link to be one of the other
named frames causes that named frame to display the specified
URL. This is used when one has a navigation frame for your webpage.
...
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
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:
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