Make your own free website on Tripod.com
University of Victoria - Computing User Services - HTML Frames and Forms

to COUS

HTML Frames and Forms
Computing Education Programmes
Date: July, 1997
Author: Ise Henin
Last Revision: September,1998
Revised by: Laura Proctor


Welcome! In this workshop, you will build on your basic knowledge of HTML (HyperText Markup Language) by learning about frames and forms. The HTML Publishing Introduction and HTML Publishing Intermediate workshops introduce HTML tags for text and graphic layout. This workshop assumes you have mastered the material covered in those two workshops.

What are frames and forms?

Frames in HTML

Forms in HTML


What are frames and forms?

Frames - Structured layouts
Forms - Getting feedback

Section Outline
Course Outline
Next Topic

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:
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.
Section Outline
Course Outline
Next Topic

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:

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
Providing no-Frame Options
Creating your own Frames
Naming and Linking Frames
Problems, Hints and References

Section Outline
Course Outline
Next Topic

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:

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

  2. A Look at File Structure and Organisation

  3. Try changing the text in both try1top.htm and try1main.htm. Save the changes and then open try1doc.htm with Netscape (or Reload it).

Section Outline
Course Outline
Next Topic

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:

  1. Use an editor to look at the file try1doc.htm
    Observe that:

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

Section Outline
Course Outline
Next Topic

Creating your own Frames



You can control the relative sizes and placement of frames through setting the ROWS and COLS attributes on the <FRAMESET> tag.
ROWS
Specify the height of each horizontal frame as a percentage of the whole window. For example: <FRAMESET ROWS="10%,50%,40%">
would create three horizontal frames like that shown below.

Top frame is 10% of window

Middle frame is 50%

of

the window

Lower frame is 40%

of
the window

COLS
Specify the width of each vertical frame as a percentage of the whole window. For example: <FRAMESET COLS="10%,50%,40%">
would create three vertical frames like that shown below.
Left Frame is 10% of the window Middle Frame is 50% of the window Right Frame is 40% of the window

The examples given above assume that the <FRAMESET> element contains three <FRAME> tags. If you wish one of the (vertical or horizontal) frames to be further divided, you use another <FRAMESET> element rather than a <FRAME> element to define its content.

The following example of mixing rows and columns is illustrated below.

 <FRAMESET ROWS="10%,50%,40%">

    <FRAME NAME="Top"  SRC="top.htm">

    <FRAMESET COLS="50%,50%">
             <FRAME NAME="Left" SRC="left.htm">
             <FRAME NAME="right" SRC="right.htm">
    </FRAMESET>
    
    <FRAME NAME="Bottom" SRC="bottom.htm">

  </FRAMESET>

Top frame is 10% of window

Middle left frame is 50%

of

the window

Middle right frame is 50%

of

the window

Lower frame is 40%

of
the window

Skip Practice


Classroom Practice:

  1. Take a moment to study the following screen layout:

    Table of Contents

    Section 1

    Section 2

    Section 3

    Presentation title and author
    Title Page

    This is the main text of the document which can be scrolled independently of the other windows. The text displayed in this window will change when a link in the Table of Contents is activated.

  2. Create three simple html files containing the text (and HTML tags) you want displayed in each of the three windows as shown in the screen layout shown above.

    You can just copy the text shown in the diagram, or use your own title, table of contents and text.

    You can use the files from the previous exercises and alter them if you wish.

  3. Create an HTML file which defines (with the tags) the frame layout as show in the screen layout above.

  4. Open the main file with Netscape to ensure that you have created the appropriate frames and loaded the files into the correct frames.

  5. Add a element which will provide a link to the table of contents document and then test your page by opening it with WinWeb or MacWeb. </ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection24"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section2">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#subsection25">Next Topic</a> </tr> </table> <h3>Naming and Linking Frames</h3> <hr align="left" width=124> <br clear=right> <blockquote> Links in a document will usually open the target location in the same frame. For example, if you had active links in the body of your presentation, clicking on them would cause the frame containing the body of your presentation to change but would leave the title and table of contents unchanged. <p>In order to make the links in the Table of Contents frame open a document in the main presentation frame, it is necessary to name the frame and to use the TARGET attribute on the &lt;A> tag or specify a target for ALL links on a page with the &lt;BASE> tag. <p> <dl> <dt>TARGET <dd>The TARGET specifies the NAME attribute of the frame in which the referenced page should be displayed. For example: <p> &lt;A HREF="intro.htm" TARGET="Main">Section 1&lt;/a> <p>would be required to cause the page stored in <em>intro.htm</em> to be displayed in the frame with the NAME attribute value of "Main". The Main frame must be defined by a tag like the following: <p> &lt;FRAME SRC="..." NAME="Main"> <p> <dt>&lt;BASE TARGET="Main"> <dd> The &lt;BASE> tag should be included within the &lt;HEAD> element. If you include this tag, you do NOT need to add the TARGET attribute in &lt;A> tags unless you wish to open the link in a different frame. <p> <dt>NAME <dd>The NAME attribute is used in the &lt;FRAME> tag to associate a name with the frame. It is not necessary unless the window is to be updated by links in another frame. It IS necessary if you want update the window through the TARGET attribute. <p> &lt;A HREF="intro.htm" TARGET="Main">Section 1&lt;/a> </dl> </blockquote> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#subsection25">Skip Practice</a> </tr> </table> <br clear=right> <a name="practice24"><hr width=124 align="left"></a> Classroom Practice: <p> <ol> <li>Use an editor to name each of the three frames in the example you created in the last classroom exercise. <p> <li>Create a new HTML file with the text associated with the first item in your table of contents (Section 1). Name the file <em>section1.html</em>. <p> <li>Add a link (&lt;A> tag) around the first item in the table of contents file (Section 1). The link will point to the file <em>section1.html</em> and specify the &lt;TARGET> frame <em>Main</em>. <p> <li>Save your changes and the <strong>Reload</strong> your page in Netscape. Click on <em>Section 1</em> in the table of contents and your new file should be displayed in the main frame in the browser window. <p> <li>For additional practice, repeat the last three steps for the second item on your table of contents. </ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection25"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section2">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#section3">Next Topic</a> </tr> </table> <h3>Problems, Hints and References</h3> <hr align="left" width=124> <br clear=right> <blockquote> <p>The usefulness of frames is subject to considerable debate. Frames give you the ability to keep part of your page visible on the screen at all times while scrolling through other part of your site. For complex documents, the table of contents can be displayed side-by-side with the document contents. This can be very useful in some applications. Some of the disadvantages (that you must weigh against the advantages) are: <ul> <p> <li>Older browsers (and text only browsers) cannot display frames. Depending on who you wish to use your page, you will have to provide a "non-frame" document to allow those using older browsers to read your web site. <p> <li>Three frames are essentially three pages and thus take longer to open than one. Those reading your web site through telephone line and modem may find the loading time prohibitive. <p> <li>Navigation can be a problem. You must carefully plan the layout of your frame content so that those reading your site can understand how to navigate. <p> <li>Printing pages made up of frames is confusing unless you remember that it is usually a <em>frame</em> that prints not the browser window. As soon as the reader clicks inside a frame, that frame becomes <em>active</em>. In most browsers there will be a change in the border colour or width to indicate the active frame. When you look at the file menu in newer browsers, you will see the option Print Frame instead of the usual Print option. In older browsers the usual Print option is displayed. Regardless of the actual text on the menu, it will be the document displayed in the active frame that is printed. <p> In some browsers, if you print a page BEFORE clicking on any frame, the <em>browser window</em> is printed instead of any individual frame. </ul> <P> Instead of using frames, you might consider using tables instead. The &lt;TABLE> tag is supported by far more browsers than frames are. As always, keep your target audience in mind when designing on the web, and provide those with slower machines, smaller screens and expensive modem connections an alternative. Tables often offer a more "user-friendly" alternative to frames. <p> If you wish to view (or print) the HTML version of a document displayed in a frame, go to the <strong>View</strong> menu and choose <strong>View Frame Source</strong>. <p> </ul> <h4>References:</h4> <ul> <li><a href="http://developer.netscape.com/library/documentation/htmlguid/index.htm">Netscape HTML Reference Manual</a> <br>(http://developer.netscape.com/library/documentation/htmlguid/) <br>This is Netscape's online HTML Tag Reference. All HTML tags and their attributes are described in this document. Click on the "Frames" link to get to the tags used to create frames. <li><a href="http://webopedia.internet.com/TERM/f/frames.html">Webopaedia.com - Frames page</a> <br>http://webopedia.internet.com/TERM/f/frames.html <br>The <em>Webopeadia</em> is an online reference book for WWW terminology. Their entry under "Frames" includes a description of frames, their purpose and a good list of online tutorials to help you learn more about using frames on your web pages. <li><a href="http://www.stars.com/Authoring/HTML/Frames/"> Virtual Library of WWW Development - HTML Forms Introduction</a> <br>http://www.stars.com/Authoring/HTML/Frames/ <br>This simple introduction to forms includes a quick reference quide and a number of annotated examples. <li> <a href="http://www.glover.com/ss/sucky04.html">Examples of poor use of frames</a> Here is another individual's opinion on the use of frames. Please read it if you are considering a web site design which will use frames. </ul> </blockquote> <!--***end of Subsection --> <!--*** Beginning of Section --> <a name="section3"><hr align="left" width=400></a> <table bgcolor="#CCCCCC"> <tr> <td valign=top align=left> <h2>Forms in HTML</h2> </td> <td valign=top align=right> <a href="#subsection31">Basic Form Elements</a> <br><a href="#subsection32">Creating a Form</a> <br><a href="#subsection33">FormMail Script Setup</a> <br><a href="#subsection34">Tailoring FormMail Output</a> <br><a href="#subsection35">References</a> </td> </tr> </table> <!--*** end of Section Beginning --> <!--***Beginning of Subsection --> <a name="subsection31"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section3">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#subsection32">Next Topic</a> </tr> </table> <h3>Basic Form Elements</h3> <hr align="left" width=124> <br clear=right> <blockquote> <p> HTML Form elements make it possible for readers of your web page to enter information that can be captured and processed. Standard form elements include radio buttons, check boxes and text boxes. You can use these elements to create questionnaires, quizzes and set variables used in (client-side) scripts. You use simple HTML tags to add these elements to a web page. The two major browsers have supported form elements since versions 2. <p>Some form elements: <table width="50%" align="center" bgcolor="#EEEEEE"> <tr> <td> <form> <em>Radio Buttons</em>: <input type="radio" name="nothin1"> Yes <input type="radio" name="nothin1"> No <p> <em>Check boxes</em>: <br> <input type="checkbox" name="nothin2"> English <input type="checkbox" name="nothin3"> French</p> <p> <em>Text Boxes</em>: <input type="text" name="nothin4" width="10"> </p> <p> <em>Submit Button</em>: <input type="submit"> </form> </td> </tr> </table> <p> The <em>action</em> associated with the <em>Submit</em> button on a form requires a CGI program that must be installed on your web server. Writing CGI scripts is not a simple matter unless you are already familiar with programming. You should consult your web server administrator (web master/webster) before undertaking the development of a CGI script. There are an increasing number of reliable and freely available scripts. The <a href="#subsection35">References</a> section includes a number of WWW sites which distribute these scripts. <p>You should be aware that by filling out a form and submitting it, you are sending information to a remote computer system where it can be stored and reused. Although a CGI program cannot obtain personal information you do not enter into the form, there are a number of system variables (like the name of your service provider) that are accessible. We discuss these later in the workshop. For now, in addition to taking care about sensitive information like credit card numbers, you should also consider carefully before supplying your email address on a form. If you are sure who is controlling the information received from the form, there is little concern. If you do not know who is receiving the information, it would probably be best not to supply it. </blockquote> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#subsection32">Skip Practice</a> </tr> </table> <br clear=right> <a name="practice31"><hr width=124 align="left"></a> Classroom Practice: <p> <ol> We have created a form that you can try out without worrying about getting someone's mailing list or any other untoward web events. <li>Follow the link to the <a name="return" href="testdriv.html">Test Drive Form</a> and observe the layout of the form. <li>Fill in the form and submit it. <li>Observe the list of variables and their values that will be displayed after you click the <em>Submit</em> button. The variables associated with the form itself are displayed first. Environment variables are provided by the server and may be used in a CGI script. <li>Return to these notes by using the <strong>Back</strong> button in your browser. </ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection32"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section3">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#subsection33">Next Topic</a> </tr> </table> <h3>Creating a Form</h3> <hr align="left" width=124> <br clear=right> <blockquote> <p>Every form begins with a <strong><tt>&lt;FORM></tt></strong> tag and ends with a <strong><tt>&lt;/FORM></tt></strong> tag. The <strong><tt>&lt;FORM></tt></strong> tag must specify the URL of the CGI script that will process the content of the form. For now, you will use the following tag which defines the ACTION attribute as the ShowVars script and the METHOD attribute as "post". Details of these attributes will be presented in the next section - <a href="#subsection33">FormMail Script Setup</a>. <blockquote> <strong><tt>&lt;FORM ACTION="http://web.uvic.ca/cgi-bin/ShowVars.pl" METHOD="post"></tt></strong> </blockquote> <p>The body of the form consists of text and a variety of input fields. There are four different types of input field you might want to use, depending on the purpose of your form. <dl> <dt>Text Input: <dd>There are two types of text input field. A text box is intended for text that is relatively short. This type of field would be appropriate for entering a name, phone number or email address. <br> <strong><tt>&lt;INPUT TYPE="text"></tt></strong> <p>A text area is used for open-ended responses (comments) when the amount of text may be quite lengthy. This type of field displays a text box which is scrollable and will accept any amount of text. <strong><tt>&lt;TEXTAREA></tt></strong> ... <strong><tt>&lt;/TEXTAREA></tt></strong> <p> <dt>Radio Buttons: <dd>Radio buttons are clickable circles which are appropriate for multiple choice responses where only a single response is accepted. One tag produces a single radio button. You will use several tags for each multiple choice question. <br> <strong><tt>&lt;INPUT TYPE="radio"></tt></strong> <p> <dt>Check Boxes: <dd>Check boxes are clickable squares (similar to radio buttons) which are appropriate to use for multiple choice responses where more than one response will be accepted. One tag is used for each check box. <br> <strong><tt>&lt;INPUT TYPE="checkbox"></tt></strong> <p> <dt>Selection Menus: <dd>Selection Menus are another way of presenting multiple choice questions. The <strong><tt>&lt;SELECT></tt></strong> tag is used with several <strong><tt>&lt;OPTION></tt></strong> tags to produce a menu (either fully visible or in a "drop-down" format) of choices that the reader can select from. <br><strong><tt>&lt;SELECT></tt></strong> ... <strong><tt>&lt;OPTION></tt></strong> ... <strong><tt>&lt;OPTION></tt></strong> ... <strong><tt>&lt;/SELECT></tt></strong> </dl> <p> <hr width="30%"> <h3>Variable Names</h3> Each value that is entered on a form must be <em>named</em> so that it is accessible to the processing script. Each tag that defines an input area must include a name for the input field in its NAME attribute. For example, a text input field called "lastname" would be defined by the tag: <blockquote> <strong><tt>&lt;INPUT TYPE="text" NAME="lastname"></tt></strong> </blockquote> Radio buttons are usually used when only one response (out of several) is acceptable. On the web page, only one of a set of radio buttons will be "on". If you click another button, it will be "on" and the previous button will be "off". To create this effect, make sure the input tags for all of the responses have the same name. Here is an example (the VALUE attribute is discussed <a href="#values">below</a>): <blockquote> <pre> &lt;p>Which university did you attend? &lt;INPUT TYPE="radio" NAME="university" VALUE="ubc">UBC &lt;INPUT TYPE="radio" NAME="university" VALUE="sfu">SFU &lt;INPUT TYPE="radio" NAME="university" VALUE="uvic">UVIC &lt;INPUT TYPE="radio" NAME="university" VALUE="other">other </pre> <p> <pre> <form> <p>Which university did you attend? <INPUT TYPE="radio" NAME="university" VALUE="ubc">UBC <INPUT TYPE="radio" NAME="university" VALUE="sfu">SFU <INPUT TYPE="radio" NAME="university" VALUE="uvic">UVIC <INPUT TYPE="radio" NAME="university" VALUE="other">other </form> </pre> </blockquote> Check boxes are conventionally used when more than one response to a question can be accepted. In this case, you must give a <strong>different</strong> name for each response. Here is an example: <pre> <blockquote> &lt;p>Which of the following courses did you take? &lt;INPUT TYPE="checkbox" NAME="biology">Biology &lt;INPUT TYPE="checkbox" NAME="chemistry" >Chemistry &lt;INPUT TYPE="checkbox" NAME="history" >History &lt;INPUT TYPE="checkbox" NAME="english" >English </blockquote> </pre> <pre> <blockquote> <form> <p>Which of the following courses did you take? <INPUT TYPE="checkbox" NAME="biology">Biology <INPUT TYPE="checkbox" NAME="chemistry" >Chemistry <INPUT TYPE="checkbox" NAME="history" >History <INPUT TYPE="checkbox" NAME="english" >English </form></blockquote> </pre> <p> <hr width="30%"> <h3><a name="values">Variable Values</a></h3> <p>Data is collected from the form elements and stored in the variables (field names) in the HTML tags. The value of a text field is taken from the input typed by the reader. For radio button input fields <strong>you</strong> must supply the value associated with each radio button in the <strong><tt>VALUE</strong></tt> attribute of the <strong><tt>INPUT</strong></tt> tag. For example (taken from above): <blockquote> <strong><tt>&lt;INPUT TYPE="radio" NAME="university" VALUE="uvic">UVIC</strong></tt> </blockquote> The variable (field) named "university" will have a value of "uvic" if the associated radio button is selected when the form is submitted. If you omit this value, the variable will simply be "on" or "off". <p>For check boxes, you can either supply a value in the same way as for radio buttons or leave out the VALUE attribute. If you leave the VALUE attribute out, the variable will get a value of "on" if the check box is checked. The variable will not have any value if the associated check box is not checked (whether or not you have supplied a value). </blockquote> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#subsection33">Skip Practice</a> </tr> </table> <br clear=right> <a name="practice32"><hr width=124 align="left"></a> Classroom Practice: <p> <ol> Now you will create your own form. You can start by using the UVic HelpDesk's automatic form generator (<a href="http://helpdesk.uvic.ca/hownote/1997/ht97054.html">http://helpdesk.uvic.ca/hownote/1997/ht97054.html</a>) or create your own "from scratch" using a simple text editor or a web page editor like Claris HomePage. <p> <li>Use Netscape's <STRONG>File > Save As</STRONG> menu item to save the <strong>Source/HTML</strong> version of the <a href="testform.html">example file </a> onto your Desktop. <br>OR <br>Use the UVic HelpDesk's automatic form generator (<a href="http://helpdesk.uvic.ca/hownote/1997/ht97054.html">http://helpdesk.uvic.ca/hownote/1997/ht97054.html</a>) to create a skeleton form, then use Netscape's <STRONG>File > Save As</STRONG> menu item to save the <strong>Source/HTML</strong> version of the file onto your Desktop. <p> <li>Open your copy of the file in an editor (Netscape, BBedit, Notepad, HomePage, ...). <p> <li>Add new text and input fields until you are familiar with the use of the <strong><tt>&lt;FORM></strong></tt> and <strong><tt>&lt;INPUT></strong></tt> tags. <p> <li>Now, add a <em>Submit</em> button with the tag: <br> <strong><tt>&lt;INPUT TYPE="submit"></strong></tt> <p>and a <em>Reset</em> button with the tag: <br> <strong><tt>&lt;INPUT TYPE="reset"></strong></tt> <p>Make sure the buttons are placed to your satisfaction on the web page. <p> <li>Test the form by clicking the <em>Submit</em> button. Carefully read the list of variables displayed to make sure that: <ul> <li>All the variables you expected are indeed listed. <li>No variables you did not expect are listed. <li>All values displayed are correct. <p> <li>Use the <B>Back</b> button to return to this exercise. </ul></ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection33"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section3">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#subsection34">Next Topic</a> </tr> </table> <h3>FormMail Script Setup</h3> <hr align="left" width=124> <br clear=right> <blockquote> <p> Browsers (that support forms) will automatically extract the information entered on a form and send it, labelled with the variable names you supplied, to the URL pointing to the appropriate CGI script (the <EM>action</EM>). The URL for the script you wish to use must be included in the <strong><tt>ACTION</strong></tt> attribute on the <strong><tt>&lt;FORM></strong></tt> tag. <p> <ul> <strong><tt>&lt;FORM ACTION="http://web.uvic.ca/cgi-bin/ShowVars.pl METHOD="POST"></tt></strong> </ul> <p> The availability of CGI scripts will vary between servers and is controlled by the web master. There are two CGI scripts available on the main UVic server: <ul> <li><B>ShowVars</b>: For testing your form. <br>http://web.uvic.ca/cgi-bin/ShowVars.pl <p> <li><B>FormMail</b>: For capturing data from your form. <br>http://web.uvic.ca/cgi-bin/FormMail.pl </ul> <p>The previous exercise used the <B>ShowVars</b> script to show you the relationship between variable names and values. The <B>ShowVars</b> script captures all of the variable information sent from the browser and then sends a formatted web page back to your browser so you can see what information was captured. The script does nothing else. It is designed only for testing forms. For this reason, you can submit a form to this script from anywhere (including your local system). [Please note that you CANNOT submit a form to the <B>FormMail</b> script unless the form is located on UVic's central server.] <p> The <B>FormMail</b> script captures data from a form just as the ShowVars script. However, instead of sending your browser a web page containing the variables, it sends a formatted list of variables and values to an electronic mail address. The FormMail script provides a way to collect information entered onto your form by readers anywhere in the world. The file you receive can then be processed by any other software you have available to you. <p> <h4>Hidden Fields</h4> <p> The <B>FormMail</b> script requires a number of variable values that you do not want set by those submitting the form. You can set fixed values for variable names by using <em>hidden</em> input fields. To use the <B>FormMail</b> script, you must specify the email address that is to receive response forms as the value of the variable "recipient". It is also useful to set the variable "subject" so that you can identify form submissions when they appear in your email. <p> You set these values by adding the two tags below to your form. There is no affect on the appearance of your form. <ul> <p> &lt;INPUT TYPE="hidden" <br>NAME="recipient" VALUE="YOURNAME@uvic.ca"> <p> &lt;INPUT TYPE="hidden" <br>NAME="subject" VALUE="FORM TITLE"> </ul> <p> <h4>Required Fields</h4> <p> You can optionally make one or more field required, so that a user cannot submit the form without filling out the field. For example, in some applications, you might want to make the user's name required. You make a field required by adding a hidden field named "required" and specifying the value as the required variable name - in this case "name". <p> <ul> &lt;INPUT TYPE="text" NAME="<B>name</b>"> <br>&lt;INPUT TYPE="hidden" NAME="required" VALUE="<B>name</b>"> </ul> <P> </blockquote> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#subsection34">Skip Practice</a> </tr> </table> <br clear=right> <a name="practice33"><hr width=124 align="left"></a> Classroom Practice: <p> <ol> <li>Add two hidden fields to your form. One field should be named "recipient" and its value should be your email address. The other should be named "subject" and its value should be the title of your form. <p> <li>Make one of the field on your form required. <p> <li>Test your form with the <B>ShowVars</b> script. You cannot test the form with the <B>FormMail</b> script until you have uploaded the web page onto the University of Victoria central server. You CAN test it using the <B>ShowVars</b> script. <p> <li>Change the attributes on the FORM tag to: <ul> ACTION="http://web.uvic.ca/cgi-bin/FormMail.pl" <br>METHOD="POST" <br>ENCTYPE="x-www-form-encoded" </ul> <p> <li>Upload your web page (and all the files it links to if necessary) to your own web space - or (if you are attending a workshop) to the web space provided by your instructor. On the Macintosh use Fetch; on Windows find the FTP program. You will need to know: <ul> <li>Your NetlinkID (= user name). <li>Your <EM>email</EM> password. <li>The WWW directory is the location for your web page(s). </ul> <p>Background information and directions for uploading files can be found by linking to the File Transfer section of the <A HREF="http://web.uvic.ca/comped/online/tools/">Internet Tools</A> workshop. <p> <li>Change the file permissions (with FTP or by logging into your Unix account) for all files you uploaded so that: <ul> Owner: Read & Write access <br>Group: Read Only <br>World: Read Only </ul> <p>For more information on uploading files and setting file permissions see the workshop <A HREF="http://web.uvic.ca/comped/online/">Maintaining a Web Site on a Unix Server</A>. <p> <li>Make sure you have correctly uploaded the file(s) and set the correct access permissions by opening the web page with Netscape (or your favourite browser). <p> <li>Fill-in and submit the form. <p> <li>Check your email - it should contain a message resulting from your submission. </ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection34"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section3">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> <tr> <td align="right"><a href="#subsection35">Next Topic</a> </tr> </table> <h3>Tailoring FormMail Output</h3> <hr align="left" width=124> <br clear=right> <blockquote> The documentation for the FormMail script and some working examples can be found at: <a href="http://web.uvic.ca/cass/docs/FormMail.html"> http://web.uvic.ca/cass/docs/FormMail.html</a>. The following are a few features of the script you may find useful. <h3>"Thank-you" Page</h3> <p> After a user clicks the <EM>Submit</EM> button, they will see a "standard" thank-you screen, listing all of the variables they entered. If you would prefer to have the user see your own "thank-you" (or some other) message instead, you can set the value of the variable "redirect" to an URL of your choice. For example: <ul> <p> &lt;INPUT TYPE="hidden" NAME="redirect" VALUE="thankyou.html"> </ul> <p>After the form is submitted, the document called "thankyou.html" will be displayed. Note that the document will not display the values of the form variables. <p>Alternately, you might simply want to change the text of the "thank-you" message or to provide a "return" link from that message. Hidden variables can be set to change the "title" (=text) of the message and the "return" location as follows: <ul> <p> &lt;INPUT TYPE="hidden" NAME="title" VALUE="Thank-you for responding! - the Editor"> <p> &lt;INPUT TYPE="hidden" NAME="return_link_url" VALUE="http"//web.uvic.ca/comped/online/"> <br>&lt;INPUT TYPE="hidden" NAME="return_link_title" VALUE="Back to Computer Education Workshop Page"> </ul> <h3>Ordering Variables</h3> <p> By default, the variables on a form will be listed in a random order in the email message you receive. If you have more than a few variables, or if you intend to do some automated processing of the data, you should consider ordering the variables. Variables can be sorted in alphabetical order by using the following hidden field: <ul> <p> &lt;INPUT TYPE="hidden" NAME="sort" VALUE="alphabetic"> </ul> <p> By naming variables with some care and aforethought, you can ensure that the email list you receive is as easy to use as possible. <p> There are a number of other attributes that will allow you to change the page background and colours. You will find them in the documentation for the <B>FormMail</b> script at: <a href="http://web.uvic.ca/cass/docs/FormMail.html"> http://web.uvic.ca/cass/docs/FormMail.html</a> </blockquote> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#subsection35">Skip Practice</a> </tr> </table> <br clear=right> <a name="practice34"><hr width=124 align="left"></a> Classroom Practice: <p> <ol> <li>Change your form so that it produces a specialized thank-you message and a link back to this course. <p> <li>Change your form so that it will display variables in alphabetic order. <p> [Remember: You must upload the file again if you make changes on your local microcomputer. You may edit the file on the UNIX server if you are familiar with using <EM>pico</EM>]. <p> <li>Try using the redirect method rather than a special thank-you message. <p> <li>Upload and test your form on the central server. </ol> <!--***end of Subsection --> <!--***Beginning of Subsection --> <a name="subsection35"><hr align="left" width=200></a> <!--** Navigation buttons --> <table bgcolor="#CCCCCC" align=right> <tr> <td align="right"><a href="#section3">Section Outline</a> </tr> <tr> <td align="right"><a href="#toc">Course Outline</a> </tr> </table> <h3>References</h3> <hr align="left" width=124> <br clear=right> <blockquote> Very often, people design forms when an email message would have been sufficient. If you only wish to get a person's name and address, for example, asking for e-mail may take much less overhead (server, your time, customer's time). <p> HTML forms can provide a variety of functions including database searches if special purpose CGI programs are available. Writing CGI programs is NOT in the scope of this course, though some of the references below provide an introduction to the topic. You should contact the Web master for your server to find out what programs are available and how to go about developing new programs. <p> Here are some references which will provide you with more detailed information about HTML forms and CGI programs (scripts). <h4>Forms</h4> <ul> <li>The documentation for the FormMail script and some working examples can be found at: <a href="http://web.uvic.ca/cass/docs/FormMail.html"> http://web.uvic.ca/cass/docs/FormMail.html</a> <li><a href="http://developer.netscape.com/library/documentation/htmlguid/index.htm">Netscape HTML Reference Manual</a> <br>(http://developer.netscape.com/library/documentation/htmlguid/) <br>This is Netscape's online HTML Tag Reference. All HTML tags and their attributes are described in this document. Click on the "Forms" link to get to the tags used to create forms. <li><a href="http://webopedia.internet.com/TERM/f/form.html">Webopaedia.com - Forms page</a> <br>http://webopedia.internet.com/TERM/f/form.html <br>The <em>Webopeadia</em> is an online reference book for WWW terminology. Their entry under "Forms" includes a description of forms, their purpose and a good list of online tutorials to help you learn more about forms. <li><a href="http://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtml"> University of Kansas Introduction to CGI Scripts and HTML Forms</a> <br>(http://www.cc.ukans.edu/info/forms/forms-intro.html) <br>This document is a good introduction to how CGI scripts work and how you can use Forms to pass data to a script. <li><a href="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html"> NCSA Mosaic Fill-out Form Support</a> <br>(http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html) <br>NCSA Mosaic was one of the first graphical web browsers. Their introductory review of fill-out forms includes numerous examples. Note: NCSA is well-known for its good web user documentation. <li><a href="http://www.stars.com/Authoring/HTML/Forms/"> Virtual Library of WWW Development - HTML Forms Introduction</a> <br>http://www.stars.com/Authoring/HTML/Forms/ <br>This simple introduction to forms includes a quick reference quide and a number of annotated examples. </ul> <h4>CGI Scripts</h4> <ul> <li><a href="http://hoohoo.ncsa.uiuc.edu/cgi/overview.html"> NCSA CGI Documentation</a> http://hoohoo.ncsa.uiuc.edu/cgi/overview.html <li><a href="http://www.worldwidemart.com/scripts/"> Matt's Script Archive</a> <br>http://www.worldwidemart.com/scripts/ <br>A source of (free) CGI scripts. <li>A <A HREF="http://webreference.com/programming/cgi.html">Webreference.com - CGI Resources</A> <br>http://webreference.com/programming/cgi.html <br>This site includes links to tutorials, reference guides, examples, free scripts and FAQ files related to creating and using CGI scripts. <br> http://www.sidestreets.com:8080/~8 <li>And, always, check out Yahoo!'s list of <A HREF="http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/CGI___Common_Gateway_Interface/"> CGI resources</A>. </ul> </blockquote> <!--***end of Subsection --> <table align=right> <tr> <td bgcolor="#CCCCCC" align="right"><a href="#toc">The End - <br>Back to Course Contents</a> </tr> </table> <br clear=right> <!-- the following is the standard ending for all online course notes --> <hr> All courses are presented by Computing Education Programs, Education Services Group, Computing User Services, <a href="http://www.uvic.ca/">University of Victoria</a> <br>Please address comments via e-mail to: <a href="mailto:comped@uvic.ca">Computing Education Programmes</a>. This page is stored at <strong>http://web.uvic.ca/comped/online/htmlff/</strong> and was last updated September 22, 1998 </body> </html>