Learn the form tag and related tags to create a method of user
interaction
Learn the basics of JavaScript, a scripting language that allows
interactions with the viewer, dynamic displays, etc.
Apply simple JavaScript to enhance the appearance and user
interaction
Learn the basic methods of creating a server-side response using
Mailto: and Common Gateway Interfaces (CGI) for simple forms
Learn to use JavaScript to validate the user's response on the
client
side
Adding Human Interaction to the Web Page:
The element of human interaction with the web page is necessary if the
WWW
is to be used as a means of creating E-commerce. Gathering
market
information, taking orders, and developing pages that attract viewers,
and
thus can be used to sell advertising, requires forms. The
concept
of a form, <form> and </form>, allows the viewer to supply
information
that can be sent from the viewer's computer (the client) to the web
business
(the server), which can process the data. The most common process uses
a
Common Gateway Interface (CGI), a program or script which can translate
the
data, enter it into a database, and create a HTML document.
Javascript is a limited scripting language that allows the web
author to
further extend the user's interactions and to make the document respond
to
user or computer events, such as clicking the mouse on a link, etc. The
language
Java, which was developed in the 1990's by Sun Computer, is a complete
program
language that adds further capability to the web page. Java and
Javascript
are not formally related and interactions between the two are limited.
Java
will be the subject of later lessons (See Lab
JavaProgramming
for the Web).
This lab will investigate JavaScript (JS) and forms. The JS material
will
revisited in other labs as computer language requires more than a
simple
tutorial. This lab will introduce the basic concepts and ask the
student
to use scripts prepared by others via cut and paste. The tutorials and
sample
scripts will be examined and discussed to increase the student's
familiarity
with the language and its syntax.
Forms:
Forms were introduced into the HTML standard to allow the viewer
(browser client) to interact with the Web server. Without this
interaction the web site is of limited use to business, serving only as
a billboard for posting notices and advertising. With the form on the
client-side and CGI programs to capture the query and field a response,
the CGI is frequently tied into the corporation's database and other
necessary computer operations. A viewer can examine the corporation's
catalogue of services and products, fill out
an order, and the CGI can take the order, examine inventory levels,
credit
files, etc., prepare an invoice, ship the product, bill the credit
card,
and send a confirmation to the viewer. All this can occur in a few
seconds
or minutes allowing the viewer to select and purchase without leaving
the
home or office.
The <FORM> Tag and Related Tags and
Attributes:
<Form></Form> Tag Attributes
Attribute
Comment
Name= "String"
Creates a name for the form object that is used by the
JavaScript to reference this container and its related object (tags).
See the discussion on javaScript objects.
Method= "Get| Post"
The data in the tag container is either passed as a:
Get -- a message attached to the URL of the location where
the information is to be processed. The attachement follows the usual
URL starting with a
"?" and followed by name and value pairs. Some special character
information is encoded to allow the receiving location to distingush
the operator characters from those used as normal text.
Post -- a file that is passed with the URL to where it
will be sent
to be processed.
Action= "URL|JavaScript"
The location where the data is to be procressed:
URL of the CGI program that translates the form data as
input for its
own use or, as we shall see in later labs on dymanic web pages, creates
a
middleware request to applications located on the server.
Mailto -- creates an email that translates the form
interaction into
a message to the author, or to an email application program that
transforms the user's interactions, i.e. takes an order.
JavaScript -- transforms the user's form inputs into an
application,
i.e creates a calculator, produces a recommendation, etc.
Enctype= "String"
The browser must prepare the information for transmission to
the server or application. The information is encoded in a manner that
the server can
parse (read). This action may involve transformation of come characters
or
symbols that have special meaning to the transfer process. After the
information
has been passed, the server or application has to unescape those
characters
that had to be translated. The string contains the name of the encoding.
Using the method Post versus Get:
From the description of the two allowed choices for the attribute
method it maybe difficult to tell how to choose "Post" over "Get". In
truth there is no major difference in selecting one or the other at the
level of this material. In normal practice "Get" is often used in
passing a small amount of information (no more than 80
characters) from the client to the server.
"Get" was developed first, and if one looks at the Location window in
the
browser after keying in a query to a search engine one will see
something
that looks like a normal URL typically ending in a path -- /cgi-bin/Program.Ext followed by a ? followed by your text
query
mixed in with some strange characters. The
cgi-bin
is the directory that contains the file Program.Ext that is to process
your
query. The "?" indicated to the web server that the remainder of the
string
is not part of the URL but a message to be processed by the Program.
The
first task that any CGI program has to do is to remove the encoding of
the
special characters back to their normal text format before parsing the
message.
The Post method takes the form's inputs and passes it through the Http
protocol
to the web server as a file and the CGI looks in the environmental
variables
of the Http and sees that the Post method was used and reads the form's
data as normal input file.
Unless the exercise calls specifically for
a
Method ="get", all exercises will be based on the Method= "Post".
Encoding Type:
The encodings that are normally supported are:
The Commonly Supported Encoding Types
Encoding Type
Comments
application/x-www-form-urlencoded
This process translates spaces in the information to "+",
non-alphanumeric data into % followed by a two digit hexadecimal that
are the ASCII code for
the symbol, and the line brakes as %0D%0A.
text/plain
As the name implies, a simple text file.
multipart/form-data
Allows the form's components, i.e. the type, send file, to be
used to
send a single MIME-compatible compound document. This is a fancy way of
describing
the familiar email attachments.
Input Tag <input> an empty container-- a variety of means
for
inputting data:
Input Tag Attributes
Attribute
Comments
Name
The Name attribute names this instance of the input object
for reference by JavaScript. Also when the Form is transmitted each
of its input containers
are transmitted as "Name=Value" pairs where "value" is the string of
information
that is entered by either the Form or the viewer.
Type
button-- creates a user defined button that can be
used in place of the Submit button. Requires a JavaScript function to
be defined.
checkbox -- a checkbox can be defined as Checked or
Not Checked (blank), indicated by a rectangular box that when Checked
has a Check character in it.
file -- Send a file to server/application, i.e. upload
a file from the browser's client computer to the server/application.
hidden -- hidden data is a (Name=Value) pair that is
not visible to the viewer through the display. Used to give the server
further information, for instance the catalogue number and its
expiration date.
image -- The image acts like a submit button when
clicked. However, the image input also attaches two variables on the
URL with the location of
the cursor when clicked over the image, i.e.;
Name.x= NumberX&Name.y=NumberY.
The NumberX and NumberY are in pixel coordinates. The name Name.x
is used when Name is set. Otherwise it is simply x=NumberX.
Seldom used input type.
password --a text window where the message appears as
"*" to the
viewer and any onlookers. Note: password is not encrypted and hence,
this
offers only modest security for the viewer.
radio -- similar to Checkbox except all tags with the
same "Name" attribute are treated as a group. Only one radio in the
group may be selected (Checked). The radio is a circular window with a
dot indicating it has been
checked. If the viewer checks another radio in the group, then the
first
checked radio is deselected and the new checked radio will have a dot
appear
in its window.
reset -- reset is a button that can have a value,
which will be
the label on the button and whose action is to clear all the viewer's
choices.
submit -- a special button that when clicked causes
the Form's information to be transferred as per the <form> tag's
method and action. The value is used to label the button with a custom
message.
text -- creates a text window where the viewer can
enter information.
Value
value -- The string (text) that, along with the name of the
input tag, creates the (Name= Value) pair that is transferred using the
Method and Action
set in the <form> tag..
Size
size -- the number of characters that can be viewed in the
text window. This attribute only applies with the type text and
password.
Maxlength
The size of the maximum text message that can be entered in
the text window.
Checked
Is only meaningful with Checkbox and Radio. When used
with Radio only one member of group can be checked. When set in the tag
it is the default,
the viewer can select another radio or turn the checkbox to False (
turn
Checked off). If no default the viewer selects the Checked element.
Examples of Input:
For the rest of the examples given on Form we will use the <Form>
tag with:
Method= "Post",
Action= "http://www.cs.uml.edu/cgi-bin/testform"
ENCTYPE=
"application/x-www-form-urlencoded"
New material will be in red to allow the user to
see
the changes made from the prior example. Please click the Submit
button. The
Form's information will be sent to the web server and a CGI program
called
testform will echo back what it recieved from the Form.
Examples <Input> types
related
to text:
Type = Text -- a text window for
submitting
an email address enabled by a Submit button:
In the example we use two input tags 1) the type
=
text where the text window length is 25 characters and we allow the
maxlength to be 40 characters, 2) the type = "submit" is named
Submit-Email and has a value= "Submit email address". By setting the
Submit value attribute in this manner we can cue the viewer as to the
nature of our request.
Example of a text used to request viewer's email
address
<!-- Text window to allow input of
email address --> <Input type="text" Name= "email"
value=""size= "25" maxlength="40">
<Input type ="Submit"
Name="Submit-Email" value="Submit email address"> </Form>
Alternative methods to cue the viewer as
to
what to fill in the text window:
In this case we set the value of the text input
tag to value="Email Address" where it had previously been set to "" (a null
string).
The input value for the Submit was also set to "". In general, if the
Form
container is complicated with several input tags and/or select tags
then
it it is difficult to use the submit to cue the input.
Example of a text used to request viewer's email
address with
a cue in the text window.
Observe how the browser uses * for your text. However, the CGI
echos back your password unencrypted -- any sniffer (a program that
listens to netrwork
traffic) could also see it.
Example of Input type= Password used to request
viewer's password.
<!-- Text window to allow input of
password Note this is not an encrypting submittion--> <Input type="password" Name=
"password" value=""size= "25" maxlength="40">
<Input type ="Submit" Name="Submit-Password" > </Form>
Example <Input type= "hidden">:
The Hidden type is used to transfer additional information that is
normally of use only to the CGI or application processing data and,
while the information is not displayed, it is a good practice to
minimize its use to informational text only, i.e. to text that is not
actively processed or could be made into
a security hole.
Example of Input type= Hidden used to label the course.
HTML Source Code
Display of the Source
<FORM NAME="hidden" METHOD=POST
ACTION="http://www.cs.uml.edu/cgi-bin/testform"
ENCTYPE="application/x-www-form-urlencoded">
Please Press the Submit there is nothing
else to do. <!-- In this example we have hidden
the information from the user. Hence no text window appears. Normally
hidden input
is sent along with user input like name, address, etc.-->
<Input type="hidden" Name=
"hidden"
value="Course Exploring the Internet"size= "25" maxlength="40">
<Input type ="Submit" Name="Submit-Hidden Data" > </Form>
Please Press the Submit there is
nothing else to do.
<!-- Text window to allow input of
email address --> <Input type="button" Name=
"ButtonTest" value="Click the Button"size= "25" maxlength="40" onClick=
"Alert">
<Input type ="Submit"
Name="Submit-Email" > </Form>
Example with <Input type= "Image">:
This example reworks the original email address textbox. Here the
type="image" works as a Submit button and the echo shows that the Image
button also is
similar to a server-side image map in that it sends the X and Y
coordinates of the cursor where it was clicked over the image. This is
a seldom used form
of input.
Example of a text used to request viewer's email
address
<!-- Text window to allow input of
email address --> <Input type="text" Name= "email"
value=""size= "25" maxlength="40">
<!-- Using an image as asubmit button
and
sending the X&Y coordinates of the click appended to the URL -->
<Input type ="Image"
src="submit.gif" Name="Submit-Email" value="Submit email address"> </Form>
Example <Input Type= "Reset"> -- Repeat the
one
of the Email text:
Example of a text used to request viewer's email
address with
a cue in the text window.
HTML Source Code
Display of the Source
<FORM NAME="email"
METHOD=POST ACTION="http://www.cs.uml.edu/cgi-bin/testform"
ENCTYPE="application/x-www-form-urlencoded">
Delete the email request cue and type in
your email address. Click the Reset button. Note what happens. Retype
your email address and submit. <!-- Text window to allow input of
email address --> <Input type="text" Name= "email"
value="Email Address"size= "25" maxlength="40"> <!-- Add a reset button to the prior
email address example -->
<Input Type= "reset" Name= "email Reset"
Value=
"reset bfore submitting"> <Input type ="Submit"
Name="Submit-Email" > </Form>
Delete the email request cue and type
in your email address. Click the Reset button. Note what happens.
Retype your email address and submit.
Checkbox and Radio Examples:
Checkbox example:
This Checkbox example allows the student to describe prior experience
through prior practice and/or major field of study. Since a Checkbox is
either checked
or unchecked the options are not either/or. Hence the reader is free to
check
all that apply. The history of the source is that this is normally a
first
computer course for about 40 per cent of students, the default is set
at
very little prior experience. (see the Checkbox Name="Very
Little"
has the attribute checked).
Example of a Checkbox to determine prior computer
experience
<!-- Checkbox with Defaults
-->
What is your prior experience with
Computers?<BR>
<INPUT TYPE=CHECKBOX NAME="CSMajor"
VALUE="YES" > CS Major<BR>
<INPUT TYPE=CHECKBOX NAME="EEMajor"
VALUE="YES"> EE Major<BR>
<INPUT TYPE=CHECKBOX NAME="SCI_ENG_MGT"
VALUE="YES" CHECKED> Science, Engineering, or Management
Major<BR>
<INPUT TYPE=CHECKBOX NAME="LiberalArts"
VALUE="YES"> Non-Science Liberal Arts<BR>
<INPUT TYPE=CHECKBOX NAME="Mus-Art"
VALUE="YES"> Music or Arts Major<BR>
<INPUT TYPE=CHECKBOX NAME="VeryLittle"
VALUE="YES" CHECKED> Very Little<BR>
<INPUT TYPE=CHECKBOX NAME="5yrs"
VALUE="YES"> 5 or More Years of Computing<BR>
<Input type ="Submit"
Name="Computer Experience" > </Form>
Radio Example:
In this Radio type example all of the input tags with the same name are
grouped
together and only one can be selected at any one time.
Clicking on one deselects the other. It is useful in either/or cases as
in
the example of year in school. If the majority of students in this
class
are supposed to have senior standing then the default Sr could
also
have the attribute checked.
Example of a <Input type= "Radio"> -- Using
class year as an example
<!-- Radio Input Type allows only one
answer -->
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Freshmen">FR.
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Sophmore">SP
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Junior">JR.
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Senior">SR.<BR>
<Input type ="Submit" Name="Class Year" > </Form>
File Send example:
The File Send or what is actually a file upload to the server/CGI
allows us to turn a form into a customer email application that allows
attachment MIME file transfers from the client to the server.
Example of Input type= File Used to request the viewer to transfer a file from the viewer's
client
machine to the application.
<!-- Transfer a file from User's
computer to the Server/Appication. Note this is not an encrypting.
--> <Input type="file" Name=
"File-Transfer" >
<Input type ="submit" Name="Send
File"
> </Form>
<Textarea></Textarea> Tag -- A Two Dimensional text
window:
A textarea is a two dimensional text window, i.e. it allows for
multiple rows of text and is very often used where a simple line of
text is inappropriate.
For instance, asking the viewer for comments on service or remarks
about
the web site should allow for more than a simple it was not good, or it
is
ok. The textarea invited the viewer to give a full and thoughtful
answer
to a question. The texbox container uses its text contents as a
default
text remark to occuppy the textarea window. Treat the Name attribute as
a
required element. The rows and columns if not defined do not have an
established
default. Thus, unless the author is truely indifferent to the
textarea's
appearance from one browser to another, the author should treat the
attributes
Rows and Cols as required.
Attributes of the <textarea></textarea>
Tag Container
Attribute
Commnets
Name
the name of the textarea instance of the textarea objects.
Rows
Rows -- the number of lines of text that appear in the
textarea.
Cols
Columns -- the number of characters that will appear in the
texbarea window in each line.
Textarea example:
Example of a textarea for collection of multi line
comments
<Textarea Name="student-comments"
rows
="5" cols="30">PLACE YOUR REMARKS HERE </Textarea>
<Input type ="Submit"
Name=Submit-student> </Form>
<Select></Select> Tag -- Select an item from a menu:
The <Select></Select> container defines a pop up
menu
or scrolling list. The viewer either over rides the Slected option by
clicking
on their choice or allows the chosen default if any. If the viewer
picks
a new option the Selected attribute is reset to match the viewer's
choice.
If the Multiple attribute is chosen then, the viewer can select
multiple
choices. Depending on the browser the viewer may be required to use the
[Shift]
or [Ctrl] key to get the appropriate multiple selections.
Treat
the Name attribute as a required element. The <Option></Option>
containers are the only allowed tags inside the <Select></Select>
container and are used to define the options that the viewer may chose.
Attributes of the <Select></Select> Tag
Container
Attribute
Commnets
Name
The name of the instance of the Select object
Size
Size -- the number of options displayed in the window at one
time. If
the number of options exceeds the size then the window will be a
scrolling list. If Size not defined then it will act as pop up menu.
Multiple
If this attribute is used it allows multiple options to be
selected at one time. Multiple is not tied to Size.
<Option>Defines options for the
<Select></Select>
Container
Attributes of the <Option>Tag Container
Attribute
Comments
Value
Value is the information to sent if selected. It does not
have to be the same information that appears to the viewer in the text
in the <Option></Option> container.
Selected
This attribute allows the author to select the default option
Examples of <Select></Select> for chosing items
from
scrolling lists or pop up menus:
A Pop Up Menu Example:
In this example the Select container has no Size attribute and defaults
to
a pop up menu. In this example the author does not default any option
to
avoid leading the reader. Note that while in this example the text that
the
viewer saw was indetical to what was sent to the server is often not
the
case. There is no reason for the value being sent to match the
descriptive text
Example of a <Select></Select> as a pop up
menu
to determine course attitude
<!-- Select acts as a Popup
Menu-->
What are your Feelings for Exploring the
Internet?<BR> <SELECT NAME="Course_Attitude" > <OPTION VALUE="OK">OK
<OPTION VALUE="Fun">Fun
<OPTION VALUE="Interesting">Interesting
<OPTION VALUE="Hard">Hard
</SELECT><BR>
<Input type ="Submit"
Name="Class Attitude" value="Submit -- student's
class attitude"> </Form>
Example as a Select Scrolling window:
Observe the Size attribute is now set to Size="4". This generates a
scrolling window that will allow all of the options to be seen in the
smaller window. This is the way e-Commerce sites use the slect tag to
locate inforamtionlike country and state.
The first option addres the viewer by -- Frst Name is Sleected as
the default
choice. Note also how the message is sent to the server. So not all
things
are not as they appear on the surface. Clearly this is a jarring
example
for the sake of making a point.
A more appropriate example -- we might ask, -- what lab by title or
number
the viewer wanted to go to, and set the value of the option to the URL
of
the lab. Then when the viewer clicked the submit button they would be
sent
to the web page of the choosen lab.
Note the slected default appears with the black text against a blue
background.
Example of using <Select></Select> tag as
a scrolling window to determine -- how a viewer wants to be formally addressed
HTML Source Code
Display of the Source
<FORM NAME="viewer-title"
METHOD=POST ACTION="http://www.cs.uml.edu/cgi-bin/testform"
ENCTYPE="application/x-www-form-urlencoded">
Please Select the title to be used in class
to used for formal address.
<!-- Selector with Size attribute set to
"4" to act like a scrolling window-->
<SELECT NAME="Title" SIZE=4>
<OPTION VALUE="hates authority"
Selected>First Name only
<OPTION VALUE="Ms">Ms.
<OPTION VALUE="Mr.">Mr.
<OPTION VALUE="Dr.">Dr.
<OPTION VALUE="Officer">Officer
<OPTION VALUE="Coach">Coach
<OPTION VALUE="Prof.">Prof.
<OPTION VALUE="Dean">Dean
</SELECT><BR>
<Input type ="Submit"
Name=Submit-your
title of address> </Form>
Example -- How do you want to be addressed with Select
allowing Multiple choices:
Example of using <Select></Select> tag as
a scrolling window to determine -- Alternatives on how viewer wants to be addressed Chose as many as apply use the [Mosue] and [Ctrl] for each
choice!!
HTML Source Code
Display of the Source
<FORM NAME="viewer-title"
METHOD=POST ACTION="http://www.cs.uml.edu/cgi-bin/testform"
ENCTYPE="application/x-www-form-urlencoded">
Please Select the title(s) to be used in
class to used when being addressed. Chose all that may apply and
instructor will chose the appropriate one..
<!-- Selector with Size attribute set to
"4" to act like a scrolling window-->
<SELECT NAME="Title" SIZE=4
Multiple>
<OPTION VALUE="hates authority"
Selected>First Name only
<OPTION VALUE="Ms">Ms.
<OPTION VALUE="Mr.">Mr.
<OPTION VALUE="Dr.">Dr.
<OPTION VALUE="Officer">Officer
<OPTION VALUE="Coach">Coach
<OPTION VALUE="Prof.">Prof.
<OPTION VALUE="Dean">Dean
</SELECT><BR>
<Input type ="Submit"
Name=Submit-your
title of address> </Form>
This is a Power Point presentation and has been designed with a 10
second automatic advance. Down load and store the file and set to
advance on click or set timer to 15-30 second advances for a more
careful introduction. Introduction to
Javascript (JSTutorial.ppt)
Some Simple javaScripts that add information and interaction to
the
web page:
Applications of Forms and Javascript
Together:
Building a simple clock:
Building a simple calendar:
Building a calculator:
Validation of Forms (client Side) before Submission
Validation is a necessary requirement for the development of any form
that
will be of use to a business. The processing of the data on the client
reduces
the load on the server and assists the viewer in preparing the correct
information
by eliminating typos and misspellings, and entering correct numerical
sequences
such as social security numbers, etc. The student should be aware that
giving
out this information is in general not a good idea.
We will examine a number of different approaches to using
JavaScripts to validate a forms inputs. The first step is always to
determine what are
the various alternatives that are legitimate inputs. For instance, a
telephone
number may be a string of ten (10) digits or 12 digits if the
number
is an international one. The user may separate the digits into
groupings
by using "( )" or "-" to separate the 3 digit area code from the 3
digit
exchange and the four digit number. Once the alternate methods of
representing
a valid input are determined an algorithm ( a proceedure) can be
specified
for checking the valid alternatives. Some may be as simple as seeing
that
the user specified one or more alphabetic characters for a first name,
i.e.
reject a empty "blank" or a string of characters that included
numerical
digits, punctation, or other non-alphabetic characters. A comlex
algorithm
might only allow names that had additional requirements such as at
least
one vowel in the name if: 1). it is more than two charaters long, 2).
matched
a table of know female first names, and/or 3). had a soundex encoding
that
matched a table.
You can devise an algorithm as carefully or as loosely as you
think appropriate
but the result still only validate that the input is of the correct
form
to be sent to the server for further processing. The Browser can
determine
that Patrick Krolak is a valid name but it can not determine if the
person
who is filling out the form is Patrick Krolak.
Examine the following a sample of approaches to validating the
following data:
Validate a Name
Validate a Name
A Name is one or more words.
A word is a string of one or more letters or special
characters
A name may have a special characters ". -,"
Examples are:
Dr. Susan Smith
P. D. Brady
Jones, Allen
Prof. Robert Smythe-Smoot
<SCRIPT LANGUAGE= "JavaScript">
// function isString checks a string to see if it is made up of only
letters
and //special allowed characters. Else it retuns false meaning invalid.
<!--
function isString(textObj) {
var newValue = textObj.value
var newLength = newValue.length
var extraChars=". -,"
var search
for(var i = 0; i != newLength; i++) {
aChar = newValue.substring(i,i+1)
aChar = aChar.toUpperCase()
search = extraChars.indexOf(aChar)
if(search == -1 && (aChar < "A" || aChar > "Z") ) {
return false
}
}
return true
}
//-->
</SCRIPT>
Validate an Integer Number
Validate A Integer Number
Validate an Integer Number Algorithm
An integer is a whole number, i.e. composed of all
digits
It is non-null, that is, it has at least one digit
<SCRIPT LANGUAGE= "JavaScript">
<!--
function isInt(textObj) {
var newValue = textObj.value
var newLength = newValue.length
for(var i = 0; i != newLength; i++) {
Go
the Calendar Example -- Note what happens when you click the Hide
link. Are you surprised? Remember that the HTML was originally a static
document. This is an example of Dynamic HTML and needs a browser that
supports the latest
versions of javaScript and HTML 4.
Lab 8: Exercises for creating and using
interactive forms and javaScripts:
Exercise 1: Our First Form using Email
The inspiration for this exercise comes from a forms
tutorial.
You should visit this site and pay close attention to Lesson
One
and the note
at
the bottom of Lesson 4, which details how to create a form that
uses
the Mailto: method to send data back to the server.
We will make only two small changes to these instructions:
We will use Word Pad as our HTML source editor.
We will use ENCTYPE="text/plain"; however, the student is
encouraged
to use the Form exactly out of the lesson. Try the original:
You may also want to download the
freeware
Mail Formatter as described in Lesson One of the Tutorial. This
not
required.
You will create, as in Lesson One, a "form1.html". However, this
"form1.html" will correct one point--that the example does not work
when there is no input
to the Form. We have used examples from Lessons One-Five to construct a
form
that exhibits all the major features of the <Form>,
<Input>, and
<Select> Tags.
Open Word Pad and Copy and Paste the following:
<HTML>
<HEAD>
<TITLE>Form Test using Email</TITLE>
</HEAD>
<BODY>
<H2> Form Test Using Email</H2>
<P Align="center">
Please Fill in All Answers and Then Press Submit<BR>
<!-- The Form Tag uses an ACTION based on Email and not the usual
CGI.
The Student will find Email From anyone who sees and fills out the
Form.
The ?subject="text" sets up the subject on the Email that allows for
automated
handling of the user's response. In this case the student will get
email
with a subject: Email Forms Test. -->
<FORM NAME="Customer" METHOD=POST
ACTION="mailto:XXX@cs.uml.edu?subject=Email Forms Test"
ENCTYPE="text/plain">
<!-- Input Type Hidden -->
<INPUT TYPE=hidden NAME="Emailtest" VALUE="My First Form">
<INPUT TYPE=text NAME="First" VALUE="">First
Name<BR>
<INPUT TYPE=text NAME="Middle" VALUE="">Middle
Name<BR>
<INPUT TYPE=text NAME="Last" VALUE="">Last
Name<BR>
<Input TYPE=text Name="Email" Value="">Email
Address<BR>
<Input TYPE=text Name="Phone" Value="(978)-934-xxxx">Campus
Phone
Number<BR>
<Input TYPE=text Name="School-ID"
Value="XXX-XX-xxxx">School ID
Number<BR>
<Input TYPE=text Name="Birth-State" Value="">If you were
born in the U.S. give abreviation of State where born -- Else Leave
Blank<BR>
<H3>School Informatiom</H3>
Year In School<BR>
<!-- Radio Input Type allows only one answer
-->
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Freshmen">FR.
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Sophmore">SP
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Junior">JR.
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Senior">SR.<BR>
<!-- Check Box with Defaults -->
What is your prior experience with Computers?<BR>
<INPUT TYPE=CHECKBOX NAME="CSMajor" VALUE="YES" > CS
Major<BR>
<INPUT TYPE=CHECKBOX NAME="EEMajor" VALUE="YES"> EE
Major<BR>
<INPUT TYPE=CHECKBOX NAME="SCI_ENG_MGT" VALUE="YES" CHECKED>
Science, Engineering, or Management Major<BR>
<INPUT TYPE=CHECKBOX NAME="LiberalArts" VALUE="YES"> Non-Science
Liberal
Arts<BR>
<INPUT TYPE=CHECKBOX NAME="Mus-Art" VALUE="YES"> Music or Arts
Major<BR>
<INPUT TYPE=CHECKBOX NAME="VeryLittle" VALUE="YES" CHECKED> Very
Little<BR>
<INPUT TYPE=CHECKBOX NAME="5yrs" VALUE="YES"> 5 or More Years of
Computing<BR>
<!-- Select acts as a Popup Menu-->
What are your Feelings for Exploring the Internet?<BR>
<SELECT NAME="Course" >
<OPTION VALUE="OK">OK
<OPTION VALUE="Fun">Fun
<OPTION VALUE="Interesting">Interesting
<OPTION VALUE="Hard">Hard
</SELECT><BR>
<!-- Text Area with comments-->
<P Align="Center">Your Comments on Exploring the
Internet<BR>
<CENTER><TEXTAREA NAME="COMMENTS" ROWS=3 COLS=40
WRAP=OFF>
:=) Yada Yada Yah
</TEXTAREA></CENTER>
<!-- Submit Button Input -->
<INPUT TYPE=submit NAME=submit VALUE="Press here to
send"><BR>
<!-- Reset Button InPut -->
<INPUT TYPE=RESET VALUE="Clear the form!"><P>
</FORM>
<A HREF="http://www.cs.uml.edu/~XXX"> Return to My Home Page</A>
</BODY>
</HTML>
Note that you must replace XXX@cs.uml.edu
with your own email address.
Before moving on you should examine the
various
forms' <input> and <select> HTML.
You should make sure that the Form is
understandable before continuing.
What is the purpose of the ?subject=Email Forms Test" following the usual Mailto:XXX@cs.uml.edu?
The Red Text can be anything meaningful to
the student.
Replace "http://www.cs.uml.edu/~XXX" with your web site's
URL.
.
Link to your web home page Replace http://www.cs.uml.edu/~XXX
Day Students
The URL is: http://www.cs.uml.edu/~Your_USERID
The text is: Visit My Home Page
Online Students
The URL is::
http://ceweb.uml.edu/students/Your_current_semester/StudentID/resource.html
Your_current_semester is
the designation
of the semester and last two digits of the year..
The StudentID is the
User ID issued at
registration
The text is: Visit My Home Page
Save the document as form1.html
using
the TEXT ONLY File Format on your A:/drive.
In your browser, use File Open and view your form1.html
page.
Fill out the Form and press submit. (No one but you will see the
answers.)
Now go to your Email and read the mail: form--yourself,
subject--Email Forms Test.
What do you observe about the process? Were there any surprises?
Exercise 2: The Next Form With a CGI
The Common Gateway Interface (CGI) is the most common mechanism for a
dialog
between a company offering a product or service and the viewer
(customer).
The computer model for CGI is called Client/Server. The client computer
is
the one being used by the viewer and is running the browser. The Server
is
the computer that is hosting the Web pages and fielding requests from
Client
computers. The Server can also run a CGI program that uses the viewers'
answers
to create searches for data located on that Web site, access to
databases,
email, etc. The CGI response can be either a static or dynamic
document,
depending on the user's request. The programming of the CGI can be done
in
many languages. However, since it requires a high level of computer
privileges,
it can be a security risk for the Server computer and should be done by
a
knowledgeable professional.
Step 3 Note that the two changes we made
involved setting:
ACTION = URL of our host Domain Name and a
path to a special directory called cgi-bin where almost all CGI
programs are stored.
The program is called testform.
We have also change the encoding to that
originally suggested by Joe Barta's Form Tutorial Lesson One,
i.e. ENCTYPE="application/x-www-form-urlencoded".
Also Change the <! > comment above
the
<form> Tag to reflect that this a cgi action and HTML Echo of
data
should be expected.
Step 4 Change the <Title> to Test Form
using
the CGI program testform
Change the page <H2> heading
similarly.
Step 5 Change the <Input Type=hidden > Tag to:
<INPUT TYPE=hidden NAME="CGI-test"
VALUE="My First CGI Form">
Step 6 The resulting Web page should be saved
as --
"form2.html" in TEXT ONLY format on the A:/ disk.
Test "form2.html" in Netscape
Communicator 4.0
-- the File Open method. Fill in the data, and press submit. Wait a
second and the CGI program should send you back a message echoing your
inputs.
Exercise 3: The Adding of JavaScript (JS)
to
our Form (Part 1)
Assuming you have read the various JavaScript tutorials and visited at
least
one cut and paste site, we shall proceed to learn about JavaScript. The
point
of this exercise is not to become a programmer but to learn to use
freeware
to enhance the scripts within our document. As the term progresses, you
should
become more comfortable with the scripts and see the coding patterns
well
enough to make more meaningful changes. You will be directed to various
tutorials
that explain the changes.
JS involves defining functions which are cut and pasted into the
HEAD section of our document. To use these functions we need to add JS
code to
one or more of the tags in the body.
The exercise will be based on a tutorial
page taken from Heidi Brumbaugh and an example
based on that material. You should visit both sites. The example is
of
interest because it sets out the validation issue in a fairly readable
form.
The problem is to make sure that the text blanks for first, middle, and
last
name, as well as email are not empty. The telephone number should be
valid
numbers as well, with the possible exception of "( )", and "-" being
used
as separators.
The problem is to cut and paste the material from
<Script> to
</Script> in the HEAD of the example page.
The name of the our form will be "Customer" to match to the
Example.
The only change in the body is this small addition to the
<Form>
tag: onSubmit="return VerifyData( )"
The onSubmit is what is called an
"event", i.e. something done by the viewer that causes a change.
In this case, it's a request
to submit the material via the Email method. VerifyData( ) makes a
crude
attempt to check the data to see if critical fields have been filled
out.
Make the changes indicated to the
source using
Cut and Paste. Call the new Web page "Form3.html"
After making the changes try running it
as in
Step 1. What happens when the data is not filled in?.
What if you don't correct it?
How do you know what data fields are
in need
of fixing? You don't! Because the validation is set to false, whether
on
or off, all the data fails the test. How would like to fix this?
The above exercise should have given you an
idea how
JavaScript and Forms can team up to provide a business with a Web site
that
can be used for ordering products, market research, and more.
<HTML>
<HEAD>
<TITLE>Test
Form using the CGI program testform</TITLE>
<! -- The Blue Text is the
Javascript
that Performs the Verification Note that the Script is mostly in the
HEAD
of the Document -->
<SCRIPT language="JavaScript">
<!-- to hide script contents
from
old browsers
function VerifyData() {
// Source code to check form data goes here.
// Create a variable to keep track of whether the form is valid.
// Initializing this value to 1 means, in effect, that
// the form is valid unless the value changes sometime in the
// routine.
var valid = 1
if (document.Customer.First.value == "") {
valid = 0
}
if
(document.Customer.Middle.value == "") {
valid = 0
}
if
(document.Customer.Last.value == "") {
valid = 0
}
if (document.Customer.Email.value == "") {
valid = 0
}
// This was not in
the
original Example Material Dr. K
if(!isValidEmail(document.Customer.Email)){
valid =0
}
if (!CheckPhoneNumber(document.Customer.Phone.value)) {
valid = 0
}
// Here we decide whether to submit the form.
if (!valid) {
alert("Please complete all the form fields and enter a valid phone
number.")
}
return valid
}
// Check for a valid email
address
(Does it contain a "@")
// This was not in
the
original Example Material Dr. K
function
isValidEmail(theField) {
var valid = 1
if(theField.value.indexOf('@',
0)
== -1){
valid = 0;
alert("You did not enter a valid email address.");
}
else
return valid;
}
function CheckPhoneNumber(TheNumber) {
var valid = 1
var GoodChars = "0123456789()-+ "
var i = 0
if (TheNumber=="") {
// Return false if number is empty
valid = 0
}
for (i =0; i <= TheNumber.length -1; i++) {
if (GoodChars.indexOf(TheNumber.charAt(i)) == -1) {
// Note: Remove the comments from the
following line to see this
// for loop in action.
alert(TheNumber.charAt(i) + " is no
good.")
valid = 0
} // End if statement
} // End for loop
return valid
}
// end hiding contents from old
browsers -->
</SCRIPT>
</Head>
<BODY>
<H2>Test Form using the CGI program
testform</H2>
<P Align="center">
Please Fill in All Answers and Then Press Submit<BR>
<!-- The Form Tag uses an ACTION based
on the usual CGI.
The Student will
find a HTML Page after filling out the form. -->
<INPUT TYPE=hidden NAME="CGIltest"
VALUE="My First Validated CGI Form">
<H3>Personal Information</H3>
<!-- Selector -->
<SELECT NAME="Title" SIZE=4>
<OPTION VALUE="Ms">Ms.
<OPTION VALUE="Mr.">Mr.
<OPTION VALUE="Dr.">Dr.
<OPTION VALUE="Officer">Officer
<OPTION VALUE="Coach">Coach
<OPTION VALUE="Prof.">Prof.
<OPTION VALUE="Dean">Dean
</SELECT><BR>
<INPUT TYPE=text NAME="First" VALUE="">First
Name<BR>
<INPUT TYPE=text NAME="Middle" VALUE="">Middle
Name<BR>
<INPUT TYPE=text NAME="Last" VALUE="">Last
Name<BR>
<Input TYPE=text Name="Email" Value="">Email
Address<BR>
<Input TYPE=text Name="Phone" Value="(978)-934-xxxx">Campus
Phone
Number<BR>
<Input TYPE=text Name="School-ID"
Value="XXX-XX-xxxx">School ID
Number<BR>
<Input TYPE=text Name="Birth-State" Value="">If you were
born in the U.S. give abreviation of State where born -- Else Leave
Blank<BR>
<H3>School Informatiom</H3>
Year In School<BR>
<!-- Radio Input Tyep -->
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Freshmen">FR.
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Sophmore">SP
<INPUT TYPE=RADIO NAME="Year_School" VALUE="Junior">JR.
<INPUT TYPE=RADIO NAME="Year_School"
VALUE="Senior">SR.<BR>
<!-- Check Box with Defaults -->
What is your prior experience with Computers?<BR>
<INPUT TYPE=CHECKBOX NAME="CSMajor" VALUE="YES" > CS
Major<BR>
<INPUT TYPE=CHECKBOX NAME="EEMajor" VALUE="YES"> EE
Major<BR>
<INPUT TYPE=CHECKBOX NAME="SCI_ENG_MGT" VALUE="YES" CHECKED>
Science, Engineering, or Management Major<BR>
<INPUT TYPE=CHECKBOX NAME="LiberalArts" VALUE="YES"> Non-Science
Liberal
Arts<BR>
<INPUT TYPE=CHECKBOX NAME="Mus-Art" VALUE="YES"> Music or Arts
Major<BR>
<INPUT TYPE=CHECKBOX NAME="VeryLittle" VALUE="YES" CHECKED> Very
Little<BR>
<INPUT TYPE=CHECKBOX NAME="5yrs" VALUE="YES"> 5 or More Years of
Computing<BR>
<!-- Selector Popup Menu-->
What are your Feelings for Exploring the Internet?<BR>
<SELECT NAME="Course" >
<OPTION VALUE="OK">OK
<OPTION VALUE="Fun">Fun
<OPTION VALUE="Interesting">Interesting
<OPTION VALUE="Hard">Hard
</SELECT><BR>
<!-- Terxt Area -->
<P Align="Center">Your Comments on Exploring the
Internet<BR>
<CENTER><TEXTAREA NAME="COMMENTS" ROWS=3 COLS=40
WRAP=OFF>
:=) Yada Yada Yah (=:
</TEXTAREA></CENTER>
<!-- Submit Button Input -->
<INPUT TYPE=submit NAME=submit VALUE="Press here to
send"><BR>
<!-- Reset Button InPut -->
<INPUT TYPE=RESET VALUE="Clear the form!"><P>
</FORM>
<A HREF="http://www.cs.uml.edu/~XXX"> Return to My Home Page</A>
<!-- What is the function of this?
-->
<A
HREF="Javascript:history.back()">BACK</A>
</BODY>
</HTML>
Exercise 4: The Adding of JavaScript
(JS)
to our Form (Part 2)
The design of the code of the above example has some issues that leave
it
open to criticism. The following should provide you with a cleaner
approach that clears up several of the problem pointed out in Exercise
3, Part 1.
Click here to Grab the
Script
Add it to your home page, i.e. index.html. This was copied from
http://www.javagoodies.com/digitalclock.txt,
A Text File (.txt)
will
appear on your Screen.
Note that the this file really is two parts: 1) the
script that will
go into the <head> container of the application, and 2) the
<body>
which has a modification of the <Body> tag and the clock itself
which
is a <form> container with a <table> container inside of
the
form.
Start at the <Script> tag and highlight the text
down to and
including the </Script> tag. Ctrl-C, i.e. Copy the highlighted
area.
Open WordPad and open it to your current home page,
i.e. index.html
on the A:/ drive.
Find the </Head> tag place you mouse in front of
it and hit
the [Enter] key to create a space for your new material. Hit Ctrl-V,
i.e.
paste in the copied <Script> container.
Click the [Save] icon
Return to your browser window, i.e. the one with the
text file in
it.
Locate the <Body onLoad="startwatch()">,
highlight the <body
tag down to and including </form> and </Center> tag. Crtl_C.
Go the WordPad with the index.html file window.
Find the <Body> tag and delete it.
Ctrl-V to paste in the new <body> tag and clock
<form>.
The Clock Author has a mistake in the clock form that
cuts off the
last digit in the digital dial. Find Size=7 in the <input>
tag
which allows 7 characters to be dispalyed. The clock display is
XX:YY:ZM
where XX, YY are two dicimal digits and Z is either a "P" or an "A" for
a
total of 8 characters to be displayed. What correction is obviously
called
for?
SaveAs Index.html.
View your new index.html page with the browser. Does
the Clock appear
at the top of the page? Then move the new index page over to your Web
site.
A
Calendar that
lists the US Holidays and keeps reminders of upcoming events.
This site it probably too complex for use in the exercise, but the page
gives an
excellent example of a personal calendar that can keep track of
the events happening in your life. How is the calendar able to
remember the data
from one day to the next?
The normal HTML document is stateless, i.e. it can not remember what
values
it had from one session to the next. With JavaScript the state of set
values
can be remembered if a "cookie" is used. Cookies are data records
that
JavaScript creates and stores on either the client computer or the
server.
Cookies allow the creation of "market basket" programs, personal
calendars,
and other useful programs.
Third Task -- Add a Calendar:
Use this for the Calendar Exercise:
The following JavaScript (in the Yellow) is to be added into
the home
page, "index.html".
You will still have "index.html" opened in WordPad in a
separate window.
Next Copy and Paste the two sections in the Yellow Sections
below
into the head and body of "index.html"
Modify the body tag.
Finally save and test using Netscape. Use the following Test
Proceedure:
-The calendar should appear with the current date.
-Click "hide" and the calendar should disappear.
-Click "show" and it should reappear.
-Test it to see if it is Y2K compliant. (Look at February 2000, 2004,
2100.
Which ones are leap years? If you don't know look it up on the Web.)
Calendar JavaScript that uses Dynamic HTML (Lab
11) to be added to the Home Page
The Yellow Section directly below
is to be Copied and Pasted into the <Head> Section of index.html Code From:
http://www.dansteinman.com/dynduo/calendar/calendar1.html The site has moved or is no longer available.
Modify the <body> tag
Modfiy the onLoad="startwatch()" Replace with below text!
onLoad="startwatch(); init()"
To see how the corrected clock and the calendar can be added to a page
see
"Calender3.html"
Fourth Task -- Add a Calculator of your choice to the
index.html
page
Go to the Pre Lab and use the Calculator link to select a calculator of
your
choice and add it to your home page.
Fifth Task -- Add
a Back
button based on JS.
The return to the page should be a JS function based on the object
document.history. See the example on using javaScript in the link
function in the Composer tutorial.
Exercise 6 : The Link the Form pages to your index.html
Link all four pages to your Web site after careful testing, i.e. -- See
Form page 1, etc.
References:
Wagner, Richard, et. al., " Javascript Unleashed 2nd
Edition", Sams.net, Indianapolis (1997).
Moncur, Micheal "SAMS Teach Yourself JavaScript in 24 Hours
2nd Edition", Sams.net, Indianapolis (2000).
CGI -- Common Gateway Interface (CGI) a server side program that
receives inputs from the client side web page. These inputs are then
processed on the
server such a database application and a response is normally send back
to
the viewer.
Form -- a set of tags that allows the web page to request and
interact with the viewer to gather data, perform an action or task,
and/or send the
data on to a server
.
Javascript -- a scripting language that is interpreted into a simple
program
at the time the web page is loaded to allow the author to create
interactions
based on a limited set of events that are defined for JavaScript's
objects.
Email
