Transcript CS403: Online Network Exploration

CS403: Online Network Exploration
Forms
Spring, 2007
Modified by Linda Kenney
April 18, 2007
7/21/2015
CS403 Introduction
1
The interactive Web
One of the fundamental differences between
the Web and other forms of mass media is
that the Web is interactive.

With radio, television, newspapers, magazines and
the like, communication is largely one way.
 The publisher presents information that users consume
(or not) as they see fit.
 While the publisher may try to elicit a response from the
user, both a temporal disconnect and a change of
medium is often required.


7/21/2015
For example, a TV commercial may encourage the viewer to “Call
now.”
When it does result in an action, that communication takes place
through another medium such as the phone or email.
CS403 Forms
2
The interactive Web (cont.)

The Web, by comparison, can support two-way
communications.
 A Web page can present the user with info and attempt
to elicit an immediate response from the user.

A temporal disconnect is not necessary (or even particularly likely)
and the response can occur over the same medium that carried
the message.





The same advantages apply to more than just placing orders.


7/21/2015
For example, a Web site can present info about a product that is for
sale and on the very same page offer users an opportunity to order
that product.
Users don’t have to add it to their “to do” list and deal with it later.
Users don’t have to pick up the phone or go to the mailbox.
Users are free to act immediately upon their impulse and order the
product they desire.
The two-way nature of the Web can be used to collect all manner of
info from users, including comments, feedback, reviews, questions,
testimonials, questions and anything else you can imagine.
The primary tool for collecting info from users on
the Web is the form.
CS403 Forms
3
Forms on the Web
When you place an order, submit a request,
provide your comments or do anything similar
on paper, it typically involves filling out and
submitting a paper form.
When you perform similar actions on the
Web, they also typically involve filling out and
submitting a form.
7/21/2015
CS403 Forms
4
Forms on the Web (cont.)
Web forms are similar to paper forms in
many ways.



7/21/2015
They generally have clearly marked areas into
which you enter info.
And those areas are typically labeled to let you
know exactly what info you are expected to enter
into them.
Scattered among the entry areas, there are often
instructions or additional details to help you
complete the form correctly.
CS403 Forms
5
Forms on the Web (cont.)
There are, however, also some useful differences.


Info entered into Web forms is entered with a mouse or
keyboard, eliminating the problems associated with illegible
handwriting.
Web forms are much easier for computers to process
without human intervention, making them much more
efficient.
 Since the computer can also check the contents before
accepting a form, it’s much easier to ensure the completeness
and accuracy of Web forms.

Web forms have no physical presence, making it feasible to
record the info they contain without warehousing stacks of
paper.
Within a Web form, the parts of the form used to
provide info are collectively known as controls.
7/21/2015
CS403 Forms
6
Controls
XHTML provides the ability to generate several different types of
controls within a form.

In general, each type of control is intended for a specific purpose.
 Text input controls are used when the user needs to enter text.
 Button controls are used to perform actions, such as submitting the completed
form or resetting a form to its default state.
 Radio button controls are used when the user must select one of several
mutually exclusive choices.
 Checkbox controls are most commonly used when the user is allowed to select
a variable number of possibly inclusive choices.
 Menu controls are used to present the user with several options from which to
choose.
 There are also controls for more advanced purposes with which we will not
concern ourselves.
7/21/2015
CS403 Forms
7
What forms do
It’s important to understand what forms do
(and don’t do).


7/21/2015
Forms are strictly for collecting input from the
user.
They don’t actually act upon that input.
CS403 Forms
8
What forms do (cont.)
Instead, the browser generally packages the input
into a form data set and sends it to a program
running on the server host.



7/21/2015
This program is referred to as the form processing agent.
Since it’s just a software program, it can do anything you
can imagine a software program doing.
That means it can send e-mail; generate images, CSS or
XHTML; access databases and other files; perform
calculations; and/or much, much more.
CS403 Forms
9
What forms do (cont.)
When the user submits a form, the browser
builds a form data set and sends it to the
form processing agent by packaging it up
in an HTTP GET or POST request
message and sending it to the appropriate
server.
7/21/2015
CS403 Forms
10
What forms do (cont.)


The server extracts the form data set from the HTTP request
and passes it to the appropriate form processing agent using
a protocol named Common Gateway Interface (CGI).
The form processing agent runs, using the form data set as
its input, and typically produces an XHTML document as its
output.
 In addition to producing an XHTML document, the form
processing agent may do any number of other tasks as well.
7/21/2015

The XHTML document produced as output of the form
processing agent gets passed back to the server using CGI.

The server then sends the resulting document back to the
browser in an HTTP response message.

And, of course, the browser renders the document it
receives for the user to view.
CS403 Forms
11
What forms do (cont.)



7/21/2015
From the users’ perspective, therefore, submitting
a form is very similar to activating a hyperlink.
It’s just that the page they see as a result was
created especially for them.
Such pages are often said to be dynamically
generated pages.
CS403 Forms
12
Form data sets
There are several important concepts
involved in understanding form data sets.


When forms are written in XHTML, each control is
identified with a control name assigned by the
author.
When forms are completed by a user, each control
is assigned a current value as a result of the
user’s actions.
 Most controls have an initial value that is set by the
browser when the form is first displayed or reset by the
user.
7/21/2015
CS403 Forms
13
Form data sets (cont.)
When the form is submitted by a user, any control for which the
author has provided a control name and the user has provided a
current value is determined to be a successful control.



Only the successful controls are considered valid for the purpose of
submission to the form processing agent.
The control name and current value of each successful control are
paired to form a control-name/current-value pair.
These pairs are then collected together to create the form data set
that the browser sends to the server.
 And the server eventually passes this form data set to the form
processing agent.

7/21/2015
By examining this form data set, the form processing agent can act
in response to the info the user has entered into the form’s
controls.
CS403 Forms
14
An example
7/21/2015
CS403 Forms
15
Creating a form
A form is just a part of an XHTML document.


7/21/2015
It is created within the XHTML through the use of
the <form> container element.
A single Web page can contain multiple forms,
though most commonly only one form per page is
used.
CS403 Forms
16
XHTML <form> tag
The form tag attributes:

action
 Specifies the server-side program or script will process your form data

id
 Identifies the form

method (used to select the form submission method)
 get – default value, form data passed in URL
 post – more secure,
form data passed in HTTP Entity Body

name
 Identifies the form
7/21/2015
CS403 Forms
17
Form submission methods
There are two methods that a browser can
use to submit a form data set to the server
for the form processing agent.
7/21/2015
CS403 Forms
18
GET method
In the GET method, the form data set is
tacked onto the URL and an HTTP GET
request is used.



7/21/2015
Remember that the URL of the requested resource
is sent as part of an HTTP GET request.
When the form data set is appended to the end of
that URL, it gets sent to the server along with the
rest of the URL.
This method is only appropriate when the form
data set is limited in size and the actions of the
form processing agent have no side-effects.
CS403 Forms
19
POST method
The alternative is to use the POST method, in
which the form data set is sent in the body of an
HTTP POST request.

This method is significantly more flexible.
 It supports larger form data sets and more types of data.

The POST method should be used when the form data set is
large, the form data set contains potentially sensitive data,
and/or the actions of the form processing agent generate
one or more side-effects.
As a Web author, you choose the method to be used
when you create the form in XHTML.
7/21/2015
CS403 Forms
20
Creating a form –action attribute

The action attribute is used to specify the URL of
the form processing agent.
 At its simplest, this will be the (typically absolute) URL of
the executable file that contains the form processing
agent.
 Since most servers require all form processing agents to
be stored in a special folder and/or named with specific
extensions, the server can tell from the URL that an
incoming request will require the execution of a form
processing agent.
 For the time being, we’ll use the absolute URL for a very
simple script that just reports back the control names
and their current values in a table.
<form method="post" action="http://pubpages.unh.edu/cgi-bin/cgiecho/~ltv6/template.txt">
7/21/2015
CS403 Forms
21
Creating a form (cont.)
The contents of the <form> container
represent the form.


7/21/2015
These contents can contain any XHTML you wish,
including paragraphs, line breaks, horizontal rules,
lists, tables, and so on.
Of course, to be useful, they should also contain
the XHTML necessary to create one or more
controls.
CS403 Forms
22
Creating simple controls
Virtually all forms will contain at least one
text input control and a submit button.
7/21/2015
CS403 Forms
23
XHTML<input> tag Text box
Used to accept text information
Attributes:





type=“text”
name
size
maxlength
Value
Code:
Email: <input type=“text” name=“email” id=“email />
7/21/2015
CS403 Forms
24
Text input control
The most common type of text input control
supports a single line of input.


7/21/2015
To create this type of control, use the <input />
element.
This is an empty, replaced element, so it ends
with a slash, not an end tag.
CS403 Forms
25
Text input control (cont.)

To get a simple single line text input control, all
you need to use is the name attribute.
 The name attribute is used to assign a control name to
the control.
 Since this control name will be used by the form
processing agent to associate a value with this specific
control, the value of the name attribute should be
unique within the form.

To control the length of the box representing the
text input control, use the size attribute.
 The value of this attribute should be a number without
any units.
 It specifies the width of the box as a number of “average
character widths.”
 Note that this is only a rough measure of box size.
7/21/2015
CS403 Forms
26
Text input control (cont.)

To control the maximum number of characters the
text input control will accept, use the maxlength
attribute.
 The value of this attribute should be a number without
any units.
 The browser should not allow more than the specified
number of characters to be entered into the text input
control.
 In general, you’ll want the value of the size attribute to
be less than or equal to the value of the maxlength
attribute.

7/21/2015
If you want to assign an initial value to the text
input control, use the value attribute. Why?
CS403 Forms
27
XHTML<input> tag Password box
Used to accept text information that needs
to be hidden as it is entered
Attributes:





type=“password”
name
size
maxlength
Value
Code:
Password: <input type=“password” name=“myPassword”
id=“myPassword />

7/21/2015
CS403 Forms
28
Submit button
A form needs to have a submit button to
ensure users have some way to submit the
form when they’re done filling it out.


7/21/2015
To create a submit button, use the <input />
element with a type attribute set equal to a value
of “submit”
Use the value attribute to set the text to be
displayed within the button.
CS403 Forms
29
XHTML<input> tag Submit Button
Used to submit the form
When clicked, it triggers the action method on the
<form> tag and causes the browser to send the form
data (the name and value pairs for each form element) to
the web server.
Attributes:



type=“submit”
name
value
<input type="submit" value=“Submit Query"/>
7/21/2015
CS403 Forms
30
XHTML<input> tag Reset Button
Used to reset the form fields to their initial
values.
Attributes:



type=“reset”
name
value
<input type="reset" value=“Reset" />
7/21/2015
CS403 Forms
31
Labeling controls
Some controls, such as submit buttons, have built-in
labels, but most do not.




7/21/2015
If you just put a bunch of controls on a page without letting
the user know what to use them for, you won’t get very
useful info submitted.
Controls should always have an associated label.
Since all controls are created with replaced elements, one
way to label them is to simply precede or follow them with
text that acts as a label.
However, this gives the browser no structural knowledge of
the association between the control and its label.
CS403 Forms
32
Labeling controls (cont.)
A better approach is to use the <label> container
element to associate a label with a control.

There are two ways to use the <label> element.
1. One way is to simply place the label text and the element that
creates the control being labeled inside the <label>
container.
2. The other way is to use the id attribute of the controlcreating element to associate a unique identity with that
control and then use the same value with the for attribute in
the start tag of the <label> element.In this method, the
<label> container only contains the label itself.

The following three examples are all equivalent, though
the second two give the browser more structural info
<p>Username: <input name="uname" /></p>
<p><label>Username: <input name="uname" /></label></p>
<p><label for="uname">Username:</label>
<input name="uname" id="uname" /></p>
7/21/2015
CS403 Forms
33
A very simple form
Consider the following sample form.

Note that it includes a single-line text input control, a submit button control
and a reset button control.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Very simple form</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>A very simple form</h1>
<form method="post" action="http://pubpages.unh.edu/cgibin/cgiecho/~ltv6/template.txt">
<p><label for="uname">Username:</label> <input name="uname" id="uname" /></p>
<p><input type="submit" value="Place order"/>
<input type="reset" value="New order" /></p>
</form>
</body>
</html>
7/21/2015
CS403 Forms
34
Radio button controls
Radio buttons are used to provide the user
with sets of mutually exclusive choices.


7/21/2015
Radio buttons always come in sets of two or more,
and the set is viewed as a single successful control
by the form processing agent.
One and only one radio button within a set must
be selected at all times. Whichever one is selected
when the form is submitted determines the
current value of the control.
CS403 Forms
35
Radio button controls (cont.)
Radio buttons are created using the <input />
element, setting its type attribute to a value of
“radio”

Each <input /> element generates one radio button.
 There must therefore always be at least two <input />
elements per set.
 To associate the <input /> elements that form a set of
radio buttons, you must give them all the same value for
their name attributes.


7/21/2015
Each radio button will require its own label.
If you wish to associate labels with each radio button using the
<label> element’s for attribute, you must give each <input />
element a unique value for it’s id attribute.
CS403 Forms
36
Radio button controls (cont.)


So the form processing agent can determine
which radio button was selected at the time of
submission, you must give each <input />
element in a set of radio buttons a different value
for its value attribute.
Since there must always be one, and only one,
radio button selected within a given set, it’s
important to indicate which radio button in a set
should be selected initially.
 To indicate a radio button to be selected initially, set the
checked attribute of that <input /> element to a
value of “checked”
7/21/2015
CS403 Forms
37
XHTML<input> tag Radio Button
Used to allow the user to select exactly one from a group
of predetermined items
Each radio button in a group is given the same name and
a unique value
Attributes:




type=“radio”
name
checked
value
<label><input name=“gender" type="radio" value=“male" checked="checked" />
Male</label><br />
<label><input name=“gender" type="radio" value=“female" />
Female</label><br />
7/21/2015
CS403 Forms
38
Checkbox controls
Checkboxes are used to present the user with
one or more possibly inclusive choices.

Although they can appear singly, checkboxes most
commonly appear in groups.
 However, they are grouped only logically and visually.

There is no grouping enforced by the browser as there is with
radio buttons.
 Within a group of checkboxes, a user may check them in
any combination necessary.

7/21/2015
Only those checked at the time of submission will be considered
successful controls.
CS403 Forms
39
Checkbox controls (cont.)
Checkboxes are created using the <input />
element, setting its type attribute to a value of
“checkbox”

Each <input /> element generates one checkbox.
 Generally, each checkbox is given a unique value for its name
attribute.

As with radio buttons, each checkbox will require its own label.
 The form processing agent will receive the value “on” as the
current value for any successful checkbox control.

If you wish to have a different value sent to the form processing agent,
specify it as the value of the <input /> element’s value attribute.
 To indicate that a checkbox should be selected initially, set the
checked attribute of that <input /> element to a value of
“checked”
7/21/2015
CS403 Forms
40
XHTML<input> tag Check box
Used to allow the user to select one or more of a
group of predetermined items
Attributes:




type=“checkbox”
name
checked
value
<p><input name=“explorer" id=“explorer" type="checkbox" />
<label for=“explorer">Internet Explorer</label><br />
<input name=“netscape" id=“netscape" type="checkbox" />
<label for=“netscape">Netscape</label><br />
<input name=“opera" id=“opera" type="checkbox" />
<label for=“opera">Opera</label><br /> </p>
7/21/2015
CS403 Forms
41
Form accessibility
Many forms have an internal structure that
associates certain controls with one another,
and conveying this structure to browsers can
improve accessibility.

The <fieldset> container element may be used
to group controls, making the association among
them clearer to the user.
 The <fieldset> element may contain any portion of the
form necessary.
 A single form may contain several fieldsets, and they
may be nested.

A <fieldset> element may contain a <legend>
container element.
 The contents of the <legend> element will be used by
the browser as a label for the fieldset.
7/21/2015
CS403 Forms
42
Form accessibility (cont.)
Additional tools for improving accessibility of forms
include tabbing order and access keys.



Each control can be selected in order by pressing the Tab
key.
By default they are selected in the order in which they
appear in the XHTML.
However, each control’s XHTML element can accept a
tabindex attribute to specify its position in the tabbing
order.
 All elements with positive tabindex values are selected first, in
order by tabindex value.
 Elements with tabindex values of 0 or none at all are selected
next, in the order they appear.

Each control’s XHTML element can also accept an
accesskey attribute to specify a keyboard shortcut.
 The value of this attribute must be a single character that can
be used to select the control.
7/21/2015
CS403 Forms
43
Another example
<form method="post" action="http://amgilder.wcit.cs.unh.edu/cgi-bin/echo.cgi">
<p><label for="uname">Username:</label> <input name="uname" id="uname" />
<label for="pword">Password:</label> <input name="pword" id="pword" type="password" /></p>
<fieldset>
<legend>Credit card info</legend>
<fieldset>
<label><input name="ctype" type="radio"
Visa</label><br />
<label><input name="ctype" type="radio"
Mastercard</label><br />
<label><input name="ctype" type="radio"
American Express</label><br />
<label><input name="ctype" type="radio"
Discover</label>
</fieldset>
value="visa" checked="checked" />
value="mastercard" />
value="amex" />
value="discover" />
<br />
<label for="cardno">Credit card number:</label>
<input name="cardno" id="cardno" />
<label for="cardno">(No spaces or dashes please!)</label>
</fieldset>
<p><input name="giftwrap" id="giftwrap" type="checkbox" />
<label for="giftwrap">Gift wrapped</label><br />
<input name="giftrcpt" id="giftrcpt" type="checkbox" />
<label for="giftrcpt">Gift receipt</label><br /></p>
<p><input type="submit" value="Place order"/>
<input type="reset" value="New order" /></p>
</form>
7/21/2015
CS403 Forms
44
XHTML<select> tag Select List
Used (along with <option> tags) to configure a Select List .
This form element is often referred to by several different names:
Select List, Select Box, Drop-Down List, Drop-Down Box, and
Option Box.
Used to allow the user to select one or more items from a list of
predetermined choices.
Attributes:
 name
 size
 multiple
7/21/2015
CS403 Forms
45
Menu controls
Menu controls provide users with several options
from which to choose.


Menus can be used for both mutually exclusive and
possibly inclusive sets of choices.
To create a menu, use a <select> container element.
 Use a name attribute to identify the control.
 By default, a menu control presents mutually exclusive choices,
but the <select> element can accept a multiple attribute
with a value of “multiple” to instruct the browser to accept
multiple selections from the list of choices.

How the user indicates multiple selections is browser specific, but it
generally involves holding down the Ctrl or other keys while clicking.
 The <select> element can also accept a size attribute with a
numeric value to inform the browser how many choices to
display at once.

7/21/2015
When used with the multiple attribute, the size attribute determines how
many choices appear in the list as one time.
CS403 Forms
46
Menu options
(see page 231-232)
A <select> element must contain one or more
<option> container elements.

Each <option> element represents one of the choices
within the menu.
 There are two ways to specify the option text that the user
sees.


The most common approach is to specify the text that is to appear for the
option within the <option> container.
It’s also possible to specify the text that the user sees as the value of the
<option> element’s label attribute.

If both approaches are combined, the value of the label attribute should be
used.
 By default, the current value of the menu control will be the
contents of the <option> element that is selected at the time
of submission.

To specify a different value, assign it to the <option> element’s value
attribute.
 By default, the first option in the menu will be initially selected.

7/21/2015
To specify a different option as the initially selected choice, set that
<option> element’s selected attribute to a value of “selected”.
CS403 Forms
47
XHTML<textarea> tag Scrolling Text Box
Used to configure a scrolling text box
Attributes:




7/21/2015
name
cols (take numeric values)
rows (take numeric values)
value
CS403 Forms
48
An example with menus and a text area
<form method="post" action="http://amgilder.wcit.cs.unh.edu/cgi-bin/echo.cgi">
…
<p><input name="giftwrap" id="giftwrap" type="checkbox" />
<label for="giftwrap">Gift wrapped</label><br />
<input name="giftrcpt" id="giftrcpt" type="checkbox" />
<label for="giftrcpt">Gift receipt</label><br /></p>
<p><label for="size">Size:</label>
<select name="size" id="size">
<option>XX-Small</option>
<option>X-Small</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-Large</option>
<option>XX-Large</option>
</select></p>
<p><label for="color">Color:</label>
<select name="color" id="color" size="4">
<option>Red</option>
<option selected="selected">Black</option>
<option>White</option>
<option>Yellow</option>
<option>Green</option>
<option>Blue</option>
<option>Gray</option>
</select></p>
<p>Special directions:<br />
<textarea name="special" rows="3" cols="50"></textarea></p>
…
</form>
7/21/2015
CS403 Forms
49
XHTML Using a Table to Format a Form
<form>
<table border="0" width="75%">
<tr>
<td align="right" width="10%">Name: </td>
<td><input type="text" name=CustomerName"
size="30" /></td>
</tr>
<tr>
<td align="right" width="10%">Email: </td>
<td><input type="text" name="CustomerEmail" /></td>
</tr>
<tr>
<td align="right" width="10%">
<input type="submit" value="Submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</form>
7/21/2015
CS403 Forms
50
Doing something useful
The form processing agent we’ve been using
in our examples so far has been simple and
handy, but it hasn’t really accomplished
anything.


7/21/2015
It has simply generated an XHTML page for the
browser to display the name-value pairs that were
submitted.
Nearly all form processing agents produce some
sort of results page for the browser to display.
CS403 Forms
51
Doing something useful (cont.)
The vast majority of form processing agents also
have more useful side effects.
 The range of possible side effects is virtually limitless, but they
typically involve using the info submitted by the form for
some purpose.
 It’s quite common for the form processing agent to be written
by a programmer especially to handle the submission of a
specific form in the context of a specific Web site.
 But we’re not programmers, and even if we were, our
pubpages server would not allow us to run our own form
processing agents.

Since they are programs that are run anonymously on the server, form
processing agents present a large risk to the security of the server host.
 Instead, we’re going to work with a form processing
agent that’s already installed on our server.
7/21/2015
CS403 Forms
52
Cgiemail
The form processing agent that we’re going
to use to accomplish something practical is
named cgiemail.
1.
2.
7/21/2015
It takes the contents of the form that the
browser submits and uses them to complete and
send an e-mail message.
After sending the e-mail message, it places the
contents of that message into a simple XHTML
results page and sends that back to the browser
to display to the user.
CS403 Forms
53
Cgiemail treats the e-mail that it is being asked to
send like a “form letter” and uses the contents of the
form to fill in the “blanks” in that “form letter” before
sending it.
The “form letter” is called a template file and the
“blanks” it contains are called merge fields.


In general, each merge field in the template file will get
replaced by one of the values the user has provided in the
form, resulting in a customized e-mail message.
This complicates the use of cgiemail, because as the
author of the form
 you must also write the template file
 and tell cgiemail where to find it.
7/21/2015
CS403 Forms
54
The cgiemail template file
Cgiemail cannot function without a template
file.



The job of the template file is to provide a
framework for the e-mail message that gets sent
when the form is submitted.
Most of the template file will consist of constant
text that will appear the same in each e-mail that
gets sent.
Some portions will consist of variable text
represented by merge fields.
 The text that eventually appears in place of these merge
fields will come from the current values that accompany
the control names in the form data set.
7/21/2015
CS403 Forms
55
A template file
A template file is just a simple text file with a valid e-mail
structure.


A valid e-mail structure requires one or more header lines followed
by a blank line followed by one or more body lines.
Header lines start with a keyword followed by a colon and end with
a value for the keyword.
 The To: keyword is used before the e-mail address of the intended
recipient.
 The CC: keyword is used before the email address of the carbon copy
recipient.
 The From: keyword is used before the e-mail address of the sender.
 The Subject: keyword is used before the subject for the message.


7/21/2015
The first blank line in the template file signals the end of the
header.
Any other lines following the first blank line are interpreted as part
of the body and may contain anything you wish.
CS403 Forms
56
Merge fields
Merge fields may appear in both the header and the
body.


To create a merge field, simply surround a control name
with square brackets.
The control names used as merge fields must match the
control names used in the XHTML for the form in both
spelling and case.
 Remember that only successful controls will appear with a
current value in the form data set.

Do NOT use a merge field to provide the value of the To: or
the CC: keyword in the header.
 This can create an e-mail gateway that could be abused by
spammers.
7/21/2015
CS403 Forms
57
http://www.sfsu.edu/training/cgiemail.htm
7/21/2015
CS403 Forms
58
Test the form with CGIECHO
Before you actually start using your form
you can test it with a program called
CGIECHO; CGIECHO works like CGIEMAIL
except the it will display the results or error
in a web page.
To test your form:

In your html file (feedback.html) use cgiecho
<form METHOD="POST" ACTION=“http://pubpages.unh.edu/cgibin/cgiecho/~accountname/feedback.txt">


7/21/2015
Open your page (which includes the form) in a
web browser.
Enter information in the fields and press the
submit button.
CS403 Forms
59
7/21/2015
CS403 Forms
60
<form method="post" action="http://pubpages.unh.edu/cgibin/cgiecho/~accountname/feedback.txt">
<p>
Year:
<select name="year">
<option value="1998">1998
<option value="1999" >1999
<option value="2000">2000
</select>
</p>
<p>
Are you a student, staff or faculty? <br />
<input type="checkbox" name="group" value="Student" checked = "checked">
Student<br />
<input type="checkbox" name="group" value="Staff">Staff<br />
<input type="checkbox" name="group" value="Faculty">Faculty
</p>
7/21/2015
CS403 Forms
61
<p>
Please select the term? <br />
<input type="radio" name="term" value="summer">summer <br />
<input type="radio" name="term" value="fall">fall <br />
<input type="radio" name="term" value="winter">winter
</p>
<p>
What is your major?<br />
<input type="text" name="major" value=" " size=30>
</p>
<p>
What is your E-mail (optional)?<br />
<input type="text" name="email" value="" size=30>
</p>
<p>
Comments:<br />
<textarea name="comments" ROWS=4 COLS=60></textarea>
</p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Start Over">
</p>
</form>
7/21/2015
CS403 Forms
62
Example (feedback.txt):
From: [email] (optional, but a good idea)
To: your-email-address
CC: [email protected]
Subject: Sample Form
Student: [group]
Term: [term]
Major: [major]
My comments:
[comments]
7/21/2015
CS403 Forms
63
Success or not?
If everything worked, a page will be displayed
showing the information submitted.
If instead you see an error with a number
near 500, your ACTION is probably set
wrong.
If some of your inputs don't seem to be
showing up in the processed form, make sure
that the inputs have the exact same names in
the XHTML form as in the template.
7/21/2015
CS403 Forms
64
Processed form looks like this:
From: (some email address in here)
To: your-email-address
CC: [email protected]
Subject: Sample Form
Date 01/01/1999
Group: student
Term: summer
Major: Accounting
My comments:
7/21/2015
CS403 Forms
65
See
7/21/2015
http://pubpages.unh.edu/~ltv6/form_comments1.html
CS403 Forms
66
If the information returned by CGIECHO was
correct make the form live by replacing
cgiecho with cgiemail in your html file
(feedback.htm).
<form METHOD="POST"
ACTION="http://pubpages.unh.edu/cgibin/cgiemail/~accountname/feedback.txt">
7/21/2015
CS403 Forms
67
See
http://pubpages.unh.edu/~ltv6/form_comments.html
7/21/2015
CS403 Forms
68
A cgiemail example
To: [email protected]
From: [email]
Subject: Sample Feedback
Hi,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Feedback form</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Feedback form</h1>
My name is [uname] and my e-mail address is [email].
I thought your site was [rating].
[comments]
Best regards,
[uname]
<form method="post"
action="http://pubpages.unh.edu/cgi-bin/cgiemail/~abc/template.txt">
<p><label for="uname">Name:</label> <input name="uname" id="uname" />
<label for="email">Email:</label> <input name="email" id="email" /></p>
<fieldset>
<legend>Rate this site</legend>
<label><input name="rating" type="radio"
Great</label><br />
<label><input name="rating" type="radio"
Good</label><br />
<label><input name="rating" type="radio"
Average</label><br />
<label><input name="rating" type="radio"
Poor</label><br />
<label><input name="rating" type="radio"
Horrible</label>
</fieldset>
value="great" checked="checked" />
value="good" />
value="average" />
value="poor" />
value="horrible" />
<p>Comments:<br />
<textarea name="comments" rows="3" cols="50"></textarea></p>
<p><input type="submit" value="Submit comments"/>
<input type="reset" value="Start over" /></p>
</form>
<p>Although it is not usually done, I have provided a link to the
<a href="../../template.txt">template file</a> so you can study
it.</p>
</body>
</html>
7/21/2015
CS403 Forms
69
Summary
Forms are an extremely versatile mechanism for
collecting input from the user..

And the possibilities for what can be done with that input
are limited only by imagination (and programming
resources)
 Forms are routinely used on the Web to accept orders, perform
searches, collect feedback, login to restricted resources, and
more.

Most of these functions involve customized form processing agents that
access databases on the server host.
 If you are interested in learning how to write your own form
processing agents, you will need to learn how to program first.

The recommended path would be to take CS503 first to learn how to
program using JavaScript and then take CS504 to learn how to apply that
knowledge of programming to the creation of your own form processing
agents.
 If you are not interested in learning how to program yourself,
you will find that there are many form processing agents
already available for free or for a price.

7/21/2015
Someday, you may even be able to afford to hire a programmer to do the
programming for you!
CS403 Forms
70
Key terms
Button control
CGI
Cgiemail
Checkbox control
Constant text
Control
Control name
Control-name/current-value
pair
Current value
Dynamically generated page
Form
Form data set
Form processing agent
7/21/2015
GET method
Interactive
Menu control
Merge field
Mutually exclusive choices
Possibly inclusive choices
POST method
Radio button control
Successful control
Template file
Text input control
Variable text
CS403 Forms
71
XHTML elements presented
<fieldset>…</fieldset>
<form>…</form>
<input />
<label>…</label>
<legend>…</legend>
<option>…</option>
<select>…</select>
<textarea>…</textarea>
7/21/2015
CS403 Forms
72
Thanks to Mike Gildersleeve for sharing the
information from his Summer, 2006 CS403
PowerPoint.
Information also used from:
Web Developer & Design Foundations with XHTML by
Terry Felke-Morris
7/21/2015
CS403 Forms
73