 |
Using forms is the only
way of interactive communication
via the Internet. |
|
 |
In other word, if you provide a form in your HTML document,
the person who looks at he document can respond and send something back to you
(or your computer) by writing text in your document or doing something
else. |
|
|
Forms are therefore very important if you want to use the
Internet for more than just for providing information. |
|
How do we generate
a form? We need to do two things: |
|
|
First: Add the specific "form" commands to
your toolbar ("View", "Toolbar", "forms") or use
the shortcut: Click with the right mouse key in he tool bar field and select
"form". Click on "insert form". A <form></form>
tag appears, but there is nothing inside. |
|
|
Second: Generate a table inside the form tag; because
whatever you are going to produce will have to be formatted, and that we do
with tables. You will need at least 3 columns. |
|
Now consider that your "customer" can
reply to you in several ways: Writing plain text, clicking on buttons (that you
provide), or clicking on entries on pull down menus you provide. The buttons of
the "form" toolbar allow you do program these (and more) options.
Lets look at the options: |
|
|
The first two buttons are labeled "insert text box" and
"insert text area". Try them in the right-hand side column of
your table within the form tags. Two text fields - a small lone ("box") and a larger one ("field") appear. The serve the same purpose -
your client can send back text he or she writes - but in somewhat different
ways. |
|
|
Click into the text fields with the right mouse key, select
"text area properties" and you
see the difference:
- The text field is for text of arbitrary
length. You can define the size of the field and your client can write as much
as he pleases into this field.
- The text box is for short messages.
Most important, you can select a maximum
length (so some disgruntled customer cannot send you back a copy of
"War and Peace" and block your system.
|
|
|
Now, you want a response to a particular question. So write
your question in the column to the left of your text fields (e.g. "How do
you like the HTML course?"). |
|
Next we will discuss the all-important question of
how to design the whole form sheet. Imagine that what you created is the whole
form. Look at it with your browser. Write something in the text field and
imagine that you sent it off (we will learn how do that in a minute). The big
question is: What will you, the originator of the form, receive? |
|
|
The answer is: You will receive an e-mail
with the text written by your client on it - nothing else! |
|
|
In other words: If you have several and more complicated
forms, you will neither know which form, nor which question your client
answered! So you must identify ("name") your form and your questions! |
|
How do we do that? By looking at an example: |
|
|
Here is the "head" part of a form that asks your
evaluation of the HTML course. It consists of the text fields we already
know. |
|
|
|
|
|
|
|
|
|
|
|
|
You see that the questions are consecutively
numbered (1.1 - 1.4). But since these numbers will not automatically appear in
the reply, we have to supply them somewhere else too - of course in the
attributes of the text fields! |
|
|
Put the cursor in a text field and hit "F6". An
attribute list appears. You recognize the numbers under "name". Never
forget to fill that in with the same identifier you used for the question (it
doesn't have to be a number, you can also use "a,b,c,.." or "I,
II, III, IV, ..."). The name you assign will now appear in front of what
the client sends back, so you now have the proper reference to your
questionnaire. |
|
|
Some of the other attributes are automatically assigned (e.g.
"type"), the rest you can select
as in many other cases that we already discussed. We will encounter some of
these attributes in what follows; for the rest consult the HoTMetaL
"help" menu (go for "forms"). |
|
Now we would know which question was answered, but
not which form. |
|
|
So use F6 in the form tag and you will find the attribute
"name" Write in the name you like to give the form sheet - it will
appear in the reply. |
|
We now can look at the other possibilities in a
form. We will do that by looking at this document in the browser! |
|
|
In the form below you find a pull-down menu or "drop down box" that can be
checked. It has several entries. |
|
|
Go back to HoTMetaL to see how it was constructed. |
|
|
The procedure, however, is a little different from the usual:
We do not use F6, but.... |
|
|
Use your right
mouse key right in the in the drop down box (of course back in
HoTMetaL) and open the "list of
properties". |
|
|
|
|
|
| 1.5 |
What is your experience with HTML?
(check one) |
|
|
|
|
|
Write in what you want in the proper entries. Just
try it out and you will see what happens. The only unclear option is "default". |
|
|
The default values you can choose are "yes" or
"no". They provide the answer to the question if the client does not check one of the options. (What ever he or
she checks will always be "yes")! |
|
|
In this example the way the default values have been set will
always provide the answer: "None" to the question "HTML
knowledge" |
|
This brings us to another major point about forms.
There are two possible recipients to a
form: 1. You as a person, or 2.
a computer. |
|
|
In the first case, default values are not important. You will
get an e-mail with possibly some questions not answered - you will conclude
something from this; that is your choice |
|
|
If the recipient is a computer, it most likely has been
programmed to do something with the replies. It will. e.g., compare it with
other replies and create some statistics for you (For example: Knowledge of
HTML from evaluating 223 replies: none: 63%, some 27%, plenty: 8%, professional
2%). In this case the computer needs a value for any entry and if your client
does not supply it, you do it via "default". |
|
|
This applies, of course, also to the other options for form
entries. |
|
Lets try the next options:
Buttons! |
|
|
Buttons are inserted from the menu bar. If you think about it,
you need two types (shown below): |
|
|
1. Buttons, where only one in a row can be
checked (below its either yes or no, not both), so these buttons
must be linked somehow. |
|
|
It works, try it with the browser. Whichever one you check,
the other, which you may have checked before, is cleared again. This reminds us
of the buttons on old transistor radios: If you press one down, the one
previously pressed comes up. This type of button therefore is called a "radio button". The round buttons below are
all radio buttons |
|
|
2. Buttons, where several can be checked simultaneously
(e.g. under 2.4 below), are called "checkboxes" |
|
You decide what kind of button it will be with the
F6 key by entering "radio" or
"checkbox" in the "Type" attribute. |
|
|
Now, if your client checks a button or a checkbox, you must
know this. If you do nothing, you will only get a reply for checked boxes
saying "on" ("on" is then the default value of a
checked box). If you want to get a different value on the reply, enter this
word in the "value" attribute |
|
|
This option has been used with some of the buttons below; look
at it (of course back in HoTMetaL) with the right
mouse key with the cursor right on the button (it must appear
marked) and open the "list of
properties". |
|
|
If you want to get a return from the unchecked boxes or
buttons only, write "checked" in
the attribute line "Checked" (or click on "checked" in the
menu "option buttons properties" that comes up by clicking with the
right mouse key on the button). |
|
|
|
|
|
|
|
|
|
The other possibilities (e.g. "insert List
Box") are now pretty much self explaining. We have now completed a form;
what is left to do is to add some help for the client and to provide for
sending it to the right person. Lets look at the example below: |
|
|
First, it is polite and a good idea to ask if the client wants
some response. This is done with a checkbox and a text box. |
|
|
Second, you should give the client a chance to change what he
or she has filled out, this means the choice between "send" or
"cancel" |
|
|
You can obtain the proper buttons directly from the menu bar
or configure a button, checkbox etc. by using "submit" or
"reset" in the attribute line "Type". The meaning is clear:
"Reset" wipes out everything already done in the form sheet,
"submit" mails it off. |
|
But to what address is the form sheet mailed?
There is no option to include an e-mail address in the attributes of the
"submit" button. |
|
|
This is only logical, because you don't want to mail off the
value of this button, but the contents of the whole form sheet. The e-mail
address therefore must be an attribute of the whole sheet! |
|
So lets look at the <form></form>
attributes. |
|
|
Most important is "Action". Here you enter the e-mail address the
form should be sent to. |
|
|
The "Method"
should be "post"; everything else
is clear (or take it from the example). |
|
One last point: The example below has a new tag
right after the form tag, <input></input> in source
code. What does it mean? |
|
|
Since you only get a very brief reply - only what your client
writes or checks; not your own text and questions - you may want to send some
more information along that helps you to evaluate the e-mails you get. For
example, you may want to have a short explanation of the answers, e.g.
"This is an answer to a form used for explaining forms in the Hyperscript
HTML". |
|
|
Of course this kind of comment should not be visible in the
Browser. If you only include it as regular comment, it will not be sent along. So you use the
"input" tag (there is even a
button "insert hidden input" for this). What ever you write in
"value" at its attribute list, will appear on the e-mail. |
|
|
|
|
|
|
