1. There are three main ways for web users and authors to
communicate with each other
e-mail messages (for example, using "mailto:")
cookies (saving state information to disk)
forms -- interactive via CGI or email
2. The Form tag, <FORM> ... </FORM>, can go anywhere in an HTML document. There can be multiple forms in the same document, and each Form uses normal HTML code to format its appearance. TABLES are often used to line up and group elements in the FORM. See Castro, Chapter 11, pp. 187-192
3.Borrow and adapt an existing form.
Since writing CGI scripts is a steep undertaking -- and your system may not support your efforts for security reasons -- you can find a working Form on your system and adapt the elements to your own use. Rutgers systems such as Pegasus are not hospitable to new CGI scripts.
In adapting an existing CGI-scripted FORM, you must change several things:
the new URL of where the FORM will be located (your file name)
the new Title you give the form (you title)
the new e-mail address targetted for replies.(your e-mail address)
of course you must also change the content, requiring some knowledge of HTML
4. Creating your own CGI form from scratch -- not recommended.
In its simplest stage, a Form for CGI requires only a few elements, and here we discuss only
the most typical:
<FORM -- the opening FORM tag
METHOD=POST
ACTION="myscripturl.cgi" -- the enabling CGI script
Of course, our FORM will be empty until we add various <INPUT xxxx > data elements -- such as text boxes, checkboxes, radio buttons, and of course Submit and Reset buttons. (See Castro, 193.)
5. Alternate Method: Creating your own email form from scratch.
In its simplest stage, a Form for email requires even fewer elements, and here we discuss only the most typical:
<FORM -- the opening FORM tag
METHOD=POST
ENCTYPE="text/plain"
ACTION="mailto:username@pegasus.rutgers.edu" -- your return email address
Of course, our FORM will be empty until we add various <INPUT xxxx > data elements -- such as text boxes, checkboxes, radio buttons, and of course Submit and Reset buttons. (See Castro, 193.)
Here's A old working example combining CGI and email in the ACTION line
Notice that elements are separated by the & (ampersand) character and spaces
are indicated by the % (percent) character. (The entire form is ast the end of this
file -- but it has not been tested on the Rutgers system lately.)
Type some text: <INPUT TYPE=TEXT NAME=TEXT1 VALUE="Tatoo me, baby!" SIZE=20 MAXLENGTH=40>
7. When a one-line TEXT box won't do, use TEXTAREA: (See Castro, 198)
<TEXTAREA
NAME="mytextarea"
ROWS=n -- default 4
COLS=n -- default 40
WRAP -- optional (see below)
> -- closing bracket
Instructions
</TEXTAREA> -- closing tag
<WRAP> values:
PHYSICAL -- wraps for both user & recipient
VIRTUAL -- wraps for user only
OFF --no wrap (default)
<TEXTAREA NAME="mytextarea" ROWS=6 COLS=20>Just do it!
ROWS=6 COLS=20> Just do it!
</TEXTAREA>
8. Radio Buttons (Castro 199)
<INPUT TYPE=RADIO NAME=RBOX VALUE=YES>Yes
<INPUT TYPE=RADIO NAME=RBOX VALUE=NO>No
<INPUT TYPE=RADIO NAME=RBOX VALUE=NO>Maybe The RADIO field has several attributes (one choice only):
<TYPE> -- here RADIO
<NAME> -- to identify it
<VALUE> -- the visible label on the screen
<CHECKED> -- if pre-selected (default)
To operate as a group, all the members of a set of radio boxes
must use the name Name attribute.
9, Checkboxes. (See Castro, 200)
The CHECKBOX field has several attributes (multiple choice permitted):
<SELECT NAME=SUNDAES SIZE=1>
<OPTION>Pistachio
<OPTION>Strawberry
<OPTION>Vanilla
<OPTION>Chocolate
<OPTION>Peach
</SELECT>
---
<SELECT NAME=SUNDAES SIZE=3>
<OPTION>Pistachio
<OPTION>Strawberry
<OPTION>Vanilla
<OPTION>Chocolate
<OPTION>Peach
</SELECT> The <SELECT> tag creates a pull-down menu:
<TYPE< -- here SELECT
<NAME> -- to identify it
<MULTIPLE> -- permits multiple options to be selected
<SIZE> -- how many options to be displayed at once, default 1
<OPTION> -- identifies each possible selection
<VALUE> -- the visible label on the screen
<SELECTED> -- to preselect one option
11. The SUBMIT field has several attributes: (Castro, 206-7
<TYPE> -- here SUBMIT
<VALUE> -- the visible label on the screen
If INPUT TYPE=IMAGE, then a graphic can be used with the SRC
attribute for the submit button. But there should be no doubt of its purpose.
12. The RESET field has several attributes:(Castro, 208-209)
<TYPE> -- here RESET
<VALUE> -- the visible label on the screen
The input type BUTTON is available for JavaScript programming.
There is also a HIDDEN type for state data to be transmitted
by a program. The PASSWORD type is like text but only asterisks
are echoed on the screen.
13. Using a free-form Button to trigger a Script: Working Example with code (looking ahead)
<BUTTON TYPE="button" NAME="name"
onClick="alert('Today is '+ Date())">
Hey, you got the time?
</BUTTON>
14. Designing forms:
The easiest way to design a form is to type it out as you would
wish it to appear, using tabs and spaces top create logical groups
and separations, and place it within <PRE>... </PRE> tags.
Keep in mind that a typical 640x480 screen can actaully use only
anout 600x400, about 72 characters wide and 20 characters high in
monspaced PRE formatting, slightly more with proportionally spaced
characters.
You can use <BLOCKQUOTE> to separate content from the margins.
TABLES are a versatile way to handle screen prompts and input
fields. Use the ALIGN attribute with Left and Right values to separate
screen prompts and text entry areas.
The entire FORM will be displayed in the designated font
in 4.0 browsers. But any portion of the FORM inside a TABLE will use
the default font.
15. Planning your information flow:
Think about fields you will really need and how you wish to order
them. Today people fill out large numbers of forms pretty habitually
but also are losing patience with unnecessary forms and extra elements in
forms. If the form is voluntary, keep the good will of your users in mind.
If the form is not voluntary, try to make its purpose clear.
Keep your users advised as to how the form will be used. A good deal of concern is felt recently about privacy and the possible inappropriate
collection and misuse of data.
Some forms require only simple yes/no radio boxes which may be
easily tabulated. Others require elaborate qualitiative statements which may be more more difficult to process. Thing about quantitative and qualitative aspects of your form and how you can best achieve your results.
Keep in mind that everything in the form, screen prompts as well
as data, will probably come back to you by e-mail. Use some readily
identifiable method of separating the prompts from the data so that
your eye will be drawn mainly to the responses.
If you will receive large amounts of data, think of ways in which
your prompts can be discarded or ignored and each response can be converted
into a single database record with multiple internal fields.
16. Tapping into CGI
Follow this model:
<FORM METHOD=post
<! *** 1. OK to use *** -->
ACTION="http://info.rutgers.edu/cgi-bin/RUInfo/SubmitForm/name=email
<! *** 2. OK to use *** -->
&url=http://andromeda.rutgers.edu/~ehrlich/465/465-1.html
<! *** 3. Use your own form absolute address after &url= ***-->
&title=465
<! *** 4. use your own document &title= *** -->
%20First
%20Day:
%20Fall_1998
<! *** 5. use %20 for each space ***
&to=ehrlich@andromeda.rutgers.edu">
<! *** 6. use your own e-mail address after &to= *** -->
<! *** 7. carefully recheck everything and then put it on one line
without spaces or hard returns. -->