Web pages are often made to give information to the student (presentational mode), but
it can be useful to get information back from the student (interactive mode). An element or object needs to be inserted into the web page that allows the student to give input. Three
steps
are needed to make it possible for someone to type information into a
web
page:
A Form sets up an area on the page
in which interactive elements (Form Objects or Form Fields) may be placed. The Form is not actually visible on your final web page.
Form fields such the text box, textarea,
drop-down
menu, and radio button,
create places within the Form on
the
page where the information may be entered.
Once the information has been entered, the student should be able to do
something with it. Information in form fields could be mailed to the
teacher,
processed with a cgi-script computer program, processed with a
JavaScript
computer program, manipulated by an ASP page, printed, or even checked
by the student against a suggested answer provided by the teacher.
In this lesson we will create interactivity on a web page by setting
up a form, making some form fields, and mailing student input to the
teacher (or simply printing the page with the student input).
Setting up a Form :
<form>
</form>
Interactive fields must be located
within
a Form.
A web page form is easy to set up, however forms can be confusing to beginners because they are NOT visible. This is where we need to becoome "the man behind the curtain." This can be done by editing the HTML
Source or by inserting the form tags while editing a page in Dreamweaver or KompoZer.
Dreamweaver is easier to use for this. Everything between the open form tag <form>
and the close form tag </form>
is part of the form, and any data entry fields must be located inside of a form
in order to work. The <form>
tag can include additional parameters that determine what the form will
do with anything that the student types.
We will make a form that will email
something
to the teacher, but your form doesn't even need to be set up to do this in particular if you don't wish it, so you can use a phony email address if you wish.
In Dreamweaver, use Insert/Form/Form to set up the Form area. This area will be visible to you within the Dreamweaver program. Then provide the Name, Method, and Action in the form's properties window. For example:
The reason for making interactive fields reside in a form in this way is that it allows all of the items in the form to be processed together, usually by pressing a button once all the fields have been filled in.
The form elements need to be inserted within the form area (in other words : between the <form> </form> tags).
To create the Form in Kompozer, use the Insert / Form / Define Form menu item and insert the following into the window:
Form Name="verb quiz"
action="mailto:fakeaddress" method="post"
If you look at the HTML Code for the form, you will see something like :
The form elements need to be inserted within the form area (between the <form></form> tags).
Inserting Form Fields
In Dreamweaver, Insert/Form/... will provide a list of form objects that you can insert (Text Field, Textarea, Button, Checkbox, Radio Button, etc.). In Kompozer, use Insert/Form/Form field... to place the elements in the form area.
For the moment, simply getting the form elements (most importantly the textbox) on your page within a form area is enough. Practice, and when you feel comfortable doing this, then go on to the next step.
Processing Student Input
There are many ways to process information from the text
boxes,
textareas, menus, radio buttons, and other form fields. Most of these
involve
computer programming that is beyond the scope of this lesson. Data can
be sent to and processed by:
a cgi script - a computer program
running
on a server
an asp web page - an active server
web page with programming built-in
a JavaScript program - a computer
program
built-into the same web page with the original form.
The cgi script and asp
page run on a remote computer and receive form data from the student
through
the Internet. In addition to sending feedback to the student,
they
are capable of storing student responses in a database for subsequent
examination
by the teacher. These techniques are not very complicated for someone
with
basic computer programming skills but do require such skills as well as
access to certain server privileges.
JavaScript is a very simple
scripting
language designed for writing small programs within a web page.
It
can process information located in form objects without accessing a remote computer.
Although JavaScript is simple as programming languages go, it is not
trivial
for a non-programmer.
Non-programmers might get help from a programmer to create a basic
general
purpose routine to do something with student input and then always use
this same program. One may also find sample utilities online that can
be used as is or slightly modified and integrated into your pages.
Or non-programmers might avoid programs altogether by making the
form
submit student input via email, print out the page with the student input, or provide a means for the student to
check
his or her own work, for example using pop-up windows explained later
in
this lesson.
The form on this page is set up for email submission. Remember the
original
<form>
tag where we did this:
The final step to submit the student responses via an email
message
uses a SUBMIT button.
<input type="submit" value="Send me
your
answers!">
In Dreamweaver, this is done by inserting a button with the Label "Send me your answers!" and the Action "Submit form."
Be sure to include a text box for the student's name if you wish
to
receive the answers via email. If not, you won't be able to tell which
student sent each email. The format of the raw information sent
by
a web form is quite limited and can be confusing to the naked eye:
Here is a sample JavaScript utility to
reformat
the student answers for the the first two questions above, making it
easier
for students to print the answers in an easy to understand format. To
send
the information in the form fields to the JavaScript utility called
"ProcessFields",
the button below uses the onClick method to pass the form elements to
the
script.
This utility is provided here only as an example; actually using such JavaScript utilities will be covered in a later lesson.
Type your name:
<input type="button" name="PrintButton"
value="Use
JavaScript to print the contents of the text and textarea boxes!"
onClick="ProcessFields(this.form,2)">
Even without a JavaScript reformatting utility, the student might
simply
press the Print button on the
browser
window to print out the answers and hand them in to the teacher.
Using pop-up windows to
provide
feedback
Providing an online answer key or placing answers in pop-up
windows may be more manageable in many cases. This method allows the
student
to check his or her own answers against the teacher's model. See
our lesson on glossing or annotating
tests
for the technical details. The following new form shows examples of how
the pop-up window technique might work for the same set of questions
shown
above:
1.
Tu
à New York ce week-end.
2.
Où est-ce que tu vas?
3.
Nous
à l'école.
4.
Vous ____________ en France.
vais
vas
va
allons
allez
vont
These pop-up windows use JavaScript, but there are other
techniques
that can also work.
For instance, you could place answers on a web page answer sheet that opens in a new window.
Summary
Form fields help make your web pages more interesting by involving
the
students actively. Many techniques can be used:
A computer program manipulating or capturing the student answers
A mailto submission sending student responses to the teacher
A JavaScript utility providing format for printing
Pop-up windows or full web page answer keys helping students check
their
work
Printing the web page itself with the answers to be handed in
By having the student do something with the language and actually manipulate information on the screen, the page becomes
interactive and helps limit the potential passivity of any medium that
sends information only in one direction.
Some of these sites are appropriate for relative beginners, but others may be considerably more complex.
