 |
. |
| |
Forms are one way that users can give feedback to a web designer. If
you have ever surfed the web, chances are, you have filled in a form.
In order for forms to work, they must be supported by a program housed at
your server in a process called CGI (Common Gateway Interface).
Normally, setting up the program to handle our form would require writing in
the computer language Perl (or C++).
Luckily, Form Handling is such a common task any more that better Web Hosts
(like Tripod) offer it without you having to
write the code. All the web designer has to do is to set a parameter in
the form that will tell the browser to use Tripod's form handler.
Netscape Editor does not have any automated functions regarding forms.
They must be hand coded in the HTML.
To create a form,
 | Use the code: |
<FORM ACTION="/bin/script_library/form_handler_mail" METHOD=POST>
</FORM>
This defines the beginning and end of your form. The ACTION and METHOD
are required to use the Tripod program and must be type exactly as you see
above. When users fill out your form, the results will be e-mailed to you.
Between these FORM tags go all of the gadgets that you can have users click
to interact with your form. They are described below:
| GADGET |
NAME |
SYNTAX EXAMPLE |
|
|
One Line Text Box |
<input type="text" name="anyname" size="20">
No end tag is required.
|
|
|
Scrolling Line Text Box |
<textarea rows="2" name="anyname" cols="20"></textarea>
|
|
|
Check Box |
<input type="checkbox" name="anyname" value="ON">
No end tag. VALUE is whether the box is checked initially. |
|
|
Radio Button |
<input type="radio" value="any" name="anyname">
No end tag. VALUE should be whatever the label is.
For example, if by checking this radio button, you are choosing
"train" from a list, the value should be "train" so
that you will be able to interpret the results. |
|
|
Drop Down Menu |
<select size="1" name="anyname">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Etc">Etc</option>
</select>
You can add as many options as you wish. Each one will become
another menu item on the drop down box. |
|
|
Submit / Reset Buttons |
<input type="submit" value="Submit" name="B1">
The Submit button MUST be included for the form to work. Again,
the name can be anything but the VALE must be "Submit". |
Here is an example of a working form and the HTML that generated it:
If you fill out the form above, it will send me the results. The HTML
for this form is:
<FORM ACTION="/bin/script_library/form_handler_mail" METHOD=POST>
<p>Please take some time to tell me about how this tutorial is going for you
with this handy form!</p>
<p>How did you find out about the tutorial?</p>
<p><select size="1" name="findout">
<option selected value="attended">I attended your workshop</option>
<option value="Co-Worker">Co-worker gave me this URL</option>
<option value="Read URL on Lab Wall">Read URL on Lab Wall</option>
<option value="Random Surfing">Random Surfing</option>
</select></p>
<p> </p>
<p>If you attended the workshop, would you say that the workshop was:</p>
<p><input type="checkbox" name="acoup" value="ON">"A Coup! Mr. Knight,
meet Mr. <b>Oscar</b>!"<br>
<input type="checkbox" name="vibrantandlively" value="ON">"Vibrant and Lively - well
performed and informative!"<br>
<input type="checkbox" name="predictableanddull" value="ON">"Predictable and Dull"<br>
<input type="checkbox" name="notenough" value="ON">"Too Many Unanswered
Questions - Screams for a Sequel!"</p>
<p> </p>
<p>Would you say that this tutorial is:</p>
<p><input type="radio" value="excellenttutorial" checked name="R1">Excellent<br>
<input type="radio" name="R1" value="goodtutorial">Good<br>
<input type="radio" name="R1" value="fairtutorial">Fair<br>
<input type="radio" name="R1" value="badtutorial">Pointless and dull, riddled with
errors, and with poor grammar to boot.</p>
<p> </p>
<p>Please give me any other comments you have on your mind:<br>
<textarea rows="2" name="comments" cols="60"></textarea></p>
<p>THANK YOU!</p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
|
|
