Building Forms
Dialoguing with the Webpage
So far we've
created webpages where we as the webmaster have just put information
out there on the Internet so that the viewer can see it. We did
go so far as to create some images that will can when the viewer
drags the mouse over the image, and of course, the user can click
on links and decide what to view next. Now we're going give the
user the opportunity to enter information and the webpage, thanks
to our design, will return information. Like so many tools for
designing webpages, the tools are basic but how we put them together
will produce fabulous results. For the most part we will be using
a tool called forms. The user will be entering data using the
forms.
Using Forms
Adding forms
with Dreamweaver is as straight forward as choosing Insert>
Form. When you do this keep an eye on the code: <form> </form>.
In the next window that appears there are several choices. While
your choices for action are endless, there are three main options:
an URL of a CGI (Common Gateway Interface) a program on the server
that processes the data, e.g. /cgi-bin/enterforms.pl;
a JavaScript program with a code like javascript: function();or
thirdly, an email address so that the data is emailed, e.g. mailto:saxowsd@wou.edu.
To include a subject for the email use the code: mailto:saxowsd@wou.ed?subject=something.
For now let's just use the email option. We'll come back to putting
data on the server later. For now we will use the POST for the
method.
Form Objects
There's a about
eight Form Objects that can be inserted in a Form in DreamWeaver.
Each can be inserted by selecting Insert> Form Objects in DreamWeaver.
Each is very briefly described below:
- Text: this simply adds text. It can be anything
from a single word to several paragraphs. This text will be
passed on to an email, a database or another program. This is
a very common and free-flowing input.
- Button: while buttons can have many uses
there are two very common uses:
- Submit: which will send your data on to the email, database
or other program.
- Reset which will set all the fields in the form back to
their beginning stage.
- Check box: this gives the user a small box
that they can check. This will pass on the information in the
checked value. One can check as many boxes as one wishs, from
none of them to all of them.
- Radio buttons: this is very much like the
check box except you can only choose one item. There is a name
for the group of items, a label for each item and a checked
value for item. The checked value will be passed.
- List/menus: These are essentially except
the way they appear on the screen. Try them in DreamWeaver and
is the difference.
- File field: the distinction of the file field
is that there will be a browser button so that the user can
actually browser the computer to find a document to be uploaded.
You can type your text in a document and upload it later with
this form object.
- Hidden object: while this may sound ridiculous,
why hide a field, you may wish to send some data on that the
computer will determine instead of the user, such as a date
or the number of entires.
- Jump object: this is the one you all want;
it's like a menu except the items are links to other webpages.
Using the Data
Once the data
is passed on from the form, there are endless possibilities what
can be done with that data. Unfortunately it requires some fancy
coding which we can't completely cover at this point, but we can
get a taste. Most forms you find on the Internet pass the data
on to a database and the coding can be through PERL, php, VBScript,
MySQL, asp and many other options. Here we will tounch on a little
php.
In order for php coding to work,
the php program must be stored on the server and this requires
cooperation from the server manager. At Western, for this class
wse have that cooperation. A over simplified explanation of php
is that it takes code and data from a database and writes a HTML
document for you so that a user can see a webpage customized with
personalized information from the data base. Try this code:
<html><head><title>php/Form Test</title></head>
<body>
<form method="post" action=sayhello.php">
Your name: <input type="text" name="user">
<br/>
<input type="submit" value="Say Hello">
</form>
</body></html>
Save this coding as formtest.html in public_html
<?php
print "Hello, ";
// print what was submitted in the form parameter 'user'
print $_POST['user'];
print "!";
?>
Save this coding as sayhello.php in your public_html
Open the file formtest.html and complete the form. The server
will create a webpage for you. Check the source coding.
|