HTML Frames and Forms

Frames - Structured layouts

Frames divide the web browser window into sections that are filled by different documents. Tables (see HTML Publishing Intermediate - Tables) are also used to arrange text and graphics in the browser window. However, frames allow each area of the window to scroll separately. Some typical uses of frames are:

A page with two frames might be used to display navigational buttons (possibly a table of contents) on one side of the window while another frame in the same window contains the body of the document.

A frame at the top of the window might contain a title or logo which remains on the screen while the content of a document is presented in a frame below it. The lower frame can be scrolled independently of the top title frame.

Two frames might be used to keep a set of instructions or questions permanently in the browser window, while a student scrolls through a quiz or exercise in a second frame.

The next part of the workshop will show you the file structure of a simple frames-enhanced document and alternative text for browsers that cannot open frames. You will create a web document that uses two frames, then practice changing the size of the frames, add a third frame, and look at some examples. Finally, we will point out some pitfalls and problems to avoid.

Basic Frame Structure
Providing no-Frame Options
Creating your own Frames
Naming and Linking Frames
Problems, Hints and References

Forms - Getting feedback

Forms add interactivity to web pages by allowing the reader to provide information by filling out a "form" in a browser window. Electronic mail links are also used to allow readers to communicate with you. If you only want some simple information, email links are the simplest method. Forms are better for collecting highly structured information. [See the HTML Publishing Intermediate workshop for more details on email links.]
A form may include:

Areas for the reader to enter text
Radio buttons, check boxes or option lists for the reader to choose from a set of alternatives

HTML tags are used to define the reader input areas of the form. A special tag is used to display a submit button which the reader will click to submit their responses.
The action taken a form is submitted depends on what facilities (CGI scripts) are available on your web server. For example, Yahoo! (and other search engines) uses a form to allow readers to enter keywords. When the form is submitted (you click the search button), a script on their server searches their database of web pages and sends a list of those which match your keywords back to your browser as a new web page.
At the present time, two CGI scripts are available on the central UVic web server. One script (ShowVars) is intended only for testing purposes and simply redisplays the values entered by the reader in your browser window. The second (FormMail) sends the responses entered by a reader to you (the author) by email. New scripts can only be added in consultation with the UVic web server maintainer (webster@uvic.ca).

The last section of the workshop will introduce typical uses of forms for obtaining feedback from a web page. You will create a simple form and practice submitting and testing it. Some methods for tailoring the output from the FormMail script for various purposes will be introduced.

Frames in HTML

Basic Frame Structure

Frames are built by adding a number of <FRAME> tags within the <FRAMESET> and </FRAMESET> tags. If there are two <FRAME> tags the browser window will be divided into two sections, if there are four, the window will be divided into four sections. You can divide the browser window into columns or rows, or a combination of both. Remember, since most people still have rather small screens, it is not wise to use more than two or three frames in a document.
The Recipe Book is an example of using frames to create an electronic "book".
Beginning with a simpler example, the following tags are required to create a web page with two frames.
<FRAMESET>
<FRAME NAME="Top"  SRC="try1top.htm">
<FRAME NAME="Main"  SRC="try1main.htm">
</FRAMESET>
Click here to see what this example looks like. The example will be displayed in a new browser window. Close the new window when you have finished looking a the example.

Skip Practice

Classroom Practice:

First copy the practice files to your desktop. Point at each filename below and hold down the (right) mouse button. Choose Save This Link As ... from the menu which pops up.
Be sure to change the Format to Source/HTML.
Do NOT change the name of the file.
Place the files on your desktop so you can find them easily.
```
try1doc.htm
try1top.htm
try1main.htm
try1text.htm
```
A Look at File Structure and Organisation
- Using an editor (Notepad for Windows or BBedit for Macintosh), look at file try1doc.htm.
  Observe that this file contains a title, but neither text nor images. Instead, this file "tells" the browser to open two other files, a "top" and a "main" frame, to provide the content for the two frames.
- Using Netscape, open file try1doc.htm. Note that the text and images you see on the page with Netscape are not stored in file try1doc.htm.
- Using the editor, look at file try1top.htm and observe that it contains the HTML codes and text page you saw in the upper portion of the browser's window when you opened file try1doc.htm.
- Now look at file try1main.htm with the editor and observe that it contains the pink background and text found in the lower part of the Netscape window of file try1doc.htm.
- In Netscape, click on the white part of the document. Observe a black border around the top frame. When you click in the pink area, you will observe that the border is around the lower frame. The border tells you which frame is "active".
Try changing the text in both try1top.htm and try1main.htm. Save the changes and then open try1doc.htm with Netscape (or Reload it).

Providing no-Frame Options

Since there are many browsers that cannot process frames, you should always provide alternate text for these browsers. You use the <NOFRAMES> and </NOFRAMES> tags to mark the beginning and end of the alternative text.
An example of tags used to provide alternate text to all browsers which do not process frames:
<NOFRAMES>
<BODY>
Sorry, your browser doesn't appear to support frames.
<P>
Please access the  
  <a href="try1text.htm">text-only</a>
version of this document.
</BODY>
</NOFRAMES>
The web browsers WinWeb (Windows) and MacWeb (Macintosh) do not support HTML frames. That is, they are not frames-capable. If you use one of these browsers to open a page which does not have a NOFRAME element , you will see nothing in the browser window. The next classroom exercise will guide you through the example documents with one of these browsers.
In lynx, the following screen was displayed for the recipe example. the names of the frames were clickable. If you go to the table of contents (toc), then the contents of the document are fully accessible. Therefore, careful design will allow exactly the same files to be used for both frames and non-frames versions of this particular document.
   FRAME: logo
   FRAME: toc
   FRAME: main

No Frame Option

   A No-Frame version of this page can accessed at:

   recipe-text.html  

Skip Practice

Classroom Practice:

Use an editor to look at the file try1doc.htm
Observe that:
- the <BODY> element is included in the <NOFRAMES> element
- the pertinent information about the page is displayed
- the link from to try1text.htm leads the user to a no-frames page layout (which might be the same files displayed in the framed version).
Use WinWeb or MacWeb to open the file try1doc.htm.
Since WinWeb cannot read frames when you opened file try1doc.htm the NOFRAME element content was displayed. Some of the more important parts of the document are duplicated in the NOFRAME element, and a link to more (non-frame formatted) information guides the reader to the appropriate non-frame web page.