Title: CS403: Online Network Exploration
1CS403 Online Network Exploration
- Forms
- Spring, 2007
- Modified by Linda Kenney
- April 18, 2007
2The 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. - 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.
3The 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. - 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 dont have to add it to their to do list
and deal with it later. - Users dont 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 same advantages apply to more than just
placing orders. - 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.
4Forms 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.
5Forms on the Web (cont.)
- Web forms are similar to paper forms in many
ways. - 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.
6Forms 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, its 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.
7Controls
- 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.
8What forms do
- Its important to understand what forms do (and
dont do). - Forms are strictly for collecting input from the
user. - They dont actually act upon that input.
9What 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. - This program is referred to as the form
processing agent. - Since its 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.
10What 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.
11What 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. - 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.
12What forms do (cont.)
- From the users perspective, therefore,
submitting a form is very similar to activating a
hyperlink. - Its just that the page they see as a result was
created especially for them. - Such pages are often said to be dynamically
generated pages.
13Form 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
users actions. - Most controls have an initial value that is set
by the browser when the form is first displayed
or reset by the user.
14Form 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. - By examining this form data set, the form
processing agent can act in response to the info
the user has entered into the forms controls.
15An example
16Creating a form
- A form is just a part of an XHTML document.
- It is created within the XHTML through the use of
the ltformgt container element. - A single Web page can contain multiple forms,
though most commonly only one form per page is
used.
17XHTML ltformgt 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
18Form 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.
19GET method
- In the GET method, the form data set is tacked
onto the URL and an HTTP GET request is used. - 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.
20POST 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.
21Creating 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, well use the absolute URL
for a very simple script that just reports back
the control names and their current values in a
table.
ltform method"post" action"http//pubpages.unh.ed
u/cgi-bin/cgiecho/ltv6/template.txt"gt
22Creating a form (cont.)
- The contents of the ltformgt container represent
the form. - 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.
23Creating simple controls
- Virtually all forms will contain at least one
text input control and a submit button.
24XHTMLltinputgt tag Text box
- Used to accept text information
- Attributes
- typetext
- name
- size
- maxlength
- Value
- Code
- Email ltinput typetext nameemail idemail
/gt
25Text input control
- The most common type of text input control
supports a single line of input. - To create this type of control, use the ltinput /gt
element. - This is an empty, replaced element, so it ends
with a slash, not an end tag.
26Text 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.
27Text 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, youll want the value of the size
attribute to be less than or equal to the value
of the maxlength attribute. - If you want to assign an initial value to the
text input control, use the value attribute. Why?
28XHTMLltinputgt tag Password box
- Used to accept text information that needs to be
hidden as it is entered - Attributes
- typepassword
- name
- size
- maxlength
- Value
- Code
- Password ltinput typepassword
namemyPassword idmyPassword /gt
29Submit button
- A form needs to have a submit button to ensure
users have some way to submit the form when
theyre done filling it out. - To create a submit button, use the ltinput /gt
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.
30XHTMLltinputgt tag Submit Button
- Used to submit the form
- When clicked, it triggers the action method on
the ltformgt tag and causes the browser to send the
form data (the name and value pairs for each form
element) to the web server. - Attributes
- typesubmit
- name
- value
ltinput type"submit" valueSubmit Query"/gt
31XHTMLltinputgt tag Reset Button
- Used to reset the form fields to their initial
values. - Attributes
- typereset
- name
- value
ltinput type"reset" valueReset" /gt
32Labeling controls
- Some controls, such as submit buttons, have
built-in labels, but most do not. - If you just put a bunch of controls on a page
without letting the user know what to use them
for, you wont 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.
33Labeling controls (cont.)
- A better approach is to use the ltlabelgt container
element to associate a label with a control. - There are two ways to use the ltlabelgt element.
- One way is to simply place the label text and the
element that creates the control being labeled
inside the ltlabelgt container. - The other way is to use the id attribute of the
control-creating 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 ltlabelgt element.In this method, the ltlabelgt
container only contains the label itself. - The following three examples are all equivalent,
though the second two give the browser more
structural info
ltpgtUsername ltinput name"uname"
/gtlt/pgtltpgtltlabelgtUsername ltinput name"uname"
/gtlt/labelgtlt/pgtltpgtltlabel for"uname"gtUsernamelt/la
belgt ltinput name"uname" id"uname" /gtlt/pgt
34A 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.
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd"gt lthtml xmlns"http//www.w3.org/
1999/xhtml" xmllang"en" lang"en"gt ltheadgt
lttitlegtVery simple formlt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetISO-8859-1" /gt lt/headgt ltbodygt
lth1gtA very simple formlt/h1gt ltform
method"post" action"http//pubpages.unh.edu/cgi-
bin/cgiecho/ltv6/template.txt"gt
ltpgtltlabel for"uname"gtUsernamelt/labelgt ltinput
name"uname" id"uname" /gtlt/pgt
ltpgtltinput type"submit" value"Place
order"/gt ltinput type"reset"
value"New order" /gtlt/pgt lt/formgt
lt/bodygt lt/htmlgt
35Radio button controls
- Radio buttons are used to provide the user with
sets of mutually exclusive choices. - 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.
36Radio button controls (cont.)
- Radio buttons are created using the ltinput /gt
element, setting its type attribute to a value of
radio - Each ltinput /gt element generates one radio
button. - There must therefore always be at least two
ltinput /gt elements per set. - To associate the ltinput /gt elements that form a
set of radio buttons, you must give them all the
same value for their name attributes. - Each radio button will require its own label.
- If you wish to associate labels with each radio
button using the ltlabelgt elements for attribute,
you must give each ltinput /gt element a unique
value for its id attribute.
37Radio button controls (cont.)
- So the form processing agent can determine which
radio button was selected at the time of
submission, you must give each ltinput /gt 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, its
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
ltinput /gt element to a value of checked
38XHTMLltinputgt 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
- typeradio
- name
- checked
- value
ltlabelgtltinput namegender" type"radio"
valuemale" checked"checked" /gt
Malelt/labelgtltbr /gt ltlabelgtltinput
namegender" type"radio" valuefemale" /gt
Femalelt/labelgtltbr /gt
39Checkbox 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. - Only those checked at the time of submission will
be considered successful controls.
40Checkbox controls (cont.)
- Checkboxes are created using the ltinput /gt
element, setting its type attribute to a value of
checkbox - Each ltinput /gt 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 ltinput /gt elements value attribute. - To indicate that a checkbox should be selected
initially, set the checked attribute of that
ltinput /gt element to a value of checked
41XHTMLltinputgt tag Check box
- Used to allow the user to select one or more of a
group of predetermined items - Attributes
- typecheckbox
- name
- checked
- value
ltpgtltinput nameexplorer" idexplorer"
type"checkbox" /gt ltlabel
forexplorer"gtInternet Explorerlt/labelgtltbr /gt
ltinput namenetscape" idnetscape"
type"checkbox" /gt ltlabel
fornetscape"gtNetscapelt/labelgtltbr /gt ltinput
nameopera" idopera" type"checkbox" /gt
ltlabel foropera"gtOperalt/labelgtltbr /gt lt/pgt
42Form accessibility
- Many forms have an internal structure that
associates certain controls with one another, and
conveying this structure to browsers can improve
accessibility. - The ltfieldsetgt container element may be used to
group controls, making the association among them
clearer to the user. - The ltfieldsetgt element may contain any portion of
the form necessary. - A single form may contain several fieldsets, and
they may be nested. - A ltfieldsetgt element may contain a ltlegendgt
container element. - The contents of the ltlegendgt element will be used
by the browser as a label for the fieldset.
43Form 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 controls 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 controls 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.
44Another example
ltform method"post" action"http//amgilder.wcit.c
s.unh.edu/cgi-bin/echo.cgi"gt ltpgtltlabel
for"uname"gtUsernamelt/labelgt ltinput name"uname"
id"uname" /gt ltlabel for"pword"gtPasswordlt
/labelgt ltinput name"pword" id"pword"
type"password" /gtlt/pgt ltfieldsetgt
ltlegendgtCredit card infolt/legendgt
ltfieldsetgt ltlabelgtltinput name"ctype"
type"radio" value"visa" checked"checked" /gt
Visalt/labelgtltbr /gt ltlabelgtltinput
name"ctype" type"radio" value"mastercard" /gt
Mastercardlt/labelgtltbr /gt
ltlabelgtltinput name"ctype" type"radio"
value"amex" /gt American
Expresslt/labelgtltbr /gt ltlabelgtltinput
name"ctype" type"radio" value"discover" /gt
Discoverlt/labelgt lt/fieldsetgt
ltbr /gt ltlabel for"cardno"gtCredit
card numberlt/labelgt ltinput name"cardno"
id"cardno" /gt ltlabel for"cardno"gt(No
spaces or dashes please!)lt/labelgt lt/fieldsetgt
ltpgtltinput name"giftwrap"
id"giftwrap" type"checkbox" /gt ltlabel
for"giftwrap"gtGift wrappedlt/labelgtltbr /gt
ltinput name"giftrcpt" id"giftrcpt"
type"checkbox" /gt ltlabel
for"giftrcpt"gtGift receiptlt/labelgtltbr /gtlt/pgt
ltpgtltinput type"submit"
value"Place order"/gt ltinput type"reset"
value"New order" /gtlt/pgt lt/formgt
45XHTMLltselectgt tag Select List
- Used (along with ltoptiongt 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
46Menu 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 ltselectgt container
element. - Use a name attribute to identify the control.
- By default, a menu control presents mutually
exclusive choices, but the ltselectgt 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 ltselectgt element can also accept a size
attribute with a numeric value to inform the
browser how many choices to display at once. - When used with the multiple attribute, the size
attribute determines how many choices appear in
the list as one time.
47Menu options (see page 231-232)
- A ltselectgt element must contain one or more
ltoptiongt container elements. - Each ltoptiongt 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
ltoptiongt container. - Its also possible to specify the text that the
user sees as the value of the ltoptiongt elements
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 ltoptiongt element that
is selected at the time of submission. - To specify a different value, assign it to the
ltoptiongt elements value attribute. - By default, the first option in the menu will be
initially selected. - To specify a different option as the initially
selected choice, set that ltoptiongt elements
selected attribute to a value of selected.
48XHTMLlttextareagt tag Scrolling Text Box
- Used to configure a scrolling text box
- Attributes
- name
- cols (take numeric values)
- rows (take numeric values)
- value
49An example with menus and a text area
ltform method"post" action"http//amgilder.wcit.
cs.unh.edu/cgi-bin/echo.cgi"gt
ltpgtltinput name"giftwrap"
id"giftwrap" type"checkbox" /gt
ltlabel for"giftwrap"gtGift wrappedlt/labelgtltbr /gt
ltinput name"giftrcpt" id"giftrcpt"
type"checkbox" /gt ltlabel
for"giftrcpt"gtGift receiptlt/labelgtltbr /gtlt/pgt
ltpgtltlabel for"size"gtSizelt/labelgt
ltselect name"size" id"size"gt
ltoptiongtXX-Smalllt/optiongt
ltoptiongtX-Smalllt/optiongt
ltoptiongtSmalllt/optiongt
ltoptiongtMediumlt/optiongt
ltoptiongtLargelt/optiongt
ltoptiongtX-Largelt/optiongt
ltoptiongtXX-Largelt/optiongt
lt/selectgtlt/pgt ltpgtltlabel
for"color"gtColorlt/labelgt
ltselect name"color" id"color" size"4"gt
ltoptiongtRedlt/optiongt
ltoption selected"selected"gtBlacklt/optiongt
ltoptiongtWhitelt/optiongt
ltoptiongtYellowlt/optiongt
ltoptiongtGreenlt/optiongt
ltoptiongtBluelt/optiongt
ltoptiongtGraylt/optiongt
lt/selectgtlt/pgt
ltpgtSpecial directionsltbr /gt
lttextarea name"special" rows"3"
cols"50"gtlt/textareagtlt/pgt
lt/formgt
50XHTML Using a Table to Format a Form
- ltformgt
- lttable border"0" width"75"gt
- lttrgt
- lttd align"right" width"10"gtName lt/tdgt
- lttdgtltinput type"text" nameCustomerName"
size"30" /gtlt/tdgt - lt/trgt
- lttrgt
- lttd align"right" width"10"gtEmail lt/tdgt
- lttdgtltinput type"text" name"CustomerEmail"
/gtlt/tdgt - lt/trgt
- lttrgt
- lttd align"right" width"10"gtltinput
type"submit" value"Submit"gtlt/tdgt - lttdgtltinput type"reset"gtlt/tdgt
- lt/trgt
- lt/tablegt
- lt/formgt
51Doing something useful
- The form processing agent weve been using in our
examples so far has been simple and handy, but it
hasnt really accomplished anything. - 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.
52Doing 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. - Its 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 were 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, were going to work with a form
processing agent thats already installed on our
server.
53Cgiemail
- The form processing agent that were going to use
to accomplish something practical is named
cgiemail. - 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.
54- 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.
55The 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.
56A 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. - 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.
57Merge 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.
58- http//www.sfsu.edu/training/cgiemail.htm
59Test 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
- ltform METHOD"POST" ACTIONhttp//pubpages.unh.ed
u/cgi-bin/cgiecho/accountname/feedback.txt"gt - Open your page (which includes the form) in a web
browser. - Enter information in the fields and press the
submit button.
60(No Transcript)
61- ltFORM METHODPOST ACTION" http//pubpages.unh.edu
/cgi-bin/cgiecho/accountname/feedback.txt"gt - Year
- ltSELECT NAME"year"gtltOPTION VALUE"1998"gt1998
- ltOPTION VALUE"1999" SELECTEDgt1999 ltOPTION
VALUE"2000"gt2000 lt/SELECTgt - ltPgt
- Are you a student, staff or faculty?ltBRgt
- ltINPUT TYPE"CHECKBOX" name"group"
value"Student" CHECKEDgtStudentltBRgt - ltINPUT TYPE"CHECKBOX" name"group"
value"Staff"gtStaffltbrgt - ltINPUT TYPE"CHECKBOX" name"group"
value"Faculty"gtFaculty - ltPgt
- Please select the term? ltBRgt
-
- ltINPUT TYPE"RADIO" name"term"
value"summer"gtsummerltBRgt - ltINPUT TYPE"RADIO" name"term"
value"fall"gtfallltBRgt
62Example (feedback.txt)
- From email (optional, but a good idea)
- To your-email-address
- CC ltv6_at_unh.edu
- Subject Sample Form
- Student group
- Term term
- Major major
- My comments
- comments
63Success 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.
64Processed form looks like this
- From (some email address in here) To
your-email-address CC ltv6_at_unh.edu - Subject Sample FormDate 01/01/1999Group
studentTerm summerMajor AccountingMy
comments
65- See http//pubpages.unh.edu/ltv6/form_comments1.h
tml
66- If the information returned by CGIECHO was
correct make the form live by replacing cgiecho
with cgiemail in your html file (feedback.htm). - ltform METHOD"POST" ACTION"http//pubpages.unh.ed
u/cgi-bin/cgiemail/accountname/feedback.txt"gt
67- See
- http//pubpages.unh.edu/ltv6/form_comments.html
68A cgiemail example
To cs403a_at_cisunix.unh.edu From email Subject
Sample Feedback Hi, My name is uname and my
e-mail address is email. I thought your site
was rating. comments Best regards, uname
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd"gt lthtml xmlns"http//www.w3.org/
1999/xhtml" xmllang"en" lang"en"gt ltheadgt
lttitlegtFeedback formlt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetISO-8859-1" /gt lt/headgt ltbodygt
lth1gtFeedback formlt/h1gt ltform
method"post" action"http//pubpages
.unh.edu/cgi-bin/cgiemail/cs403a/template.txt"gt
ltpgtltlabel for"uname"gtNamelt/labelgt
ltinput name"uname" id"uname" /gt
ltlabel for"email"gtEmaillt/labelgt ltinput
name"email" id"email" /gtlt/pgt
ltfieldsetgt ltlegendgtRate this
sitelt/legendgt ltlabelgtltinput
name"rating" type"radio" value"great"
checked"checked" /gt Greatlt/labelgtltbr
/gt ltlabelgtltinput name"rating"
type"radio" value"good" /gt
Goodlt/labelgtltbr /gt ltlabelgtltinput
name"rating" type"radio" value"average" /gt
Averagelt/labelgtltbr /gt
ltlabelgtltinput name"rating" type"radio"
value"poor" /gt Poorlt/labelgtltbr /gt
ltlabelgtltinput name"rating" type"radio"
value"horrible" /gt Horriblelt/labelgt
lt/fieldsetgt
ltpgtCommentsltbr /gt
lttextarea name"comments" rows"3"
cols"50"gtlt/textareagtlt/pgt
ltpgtltinput type"submit" value"Submit
comments"/gt ltinput type"reset"
value"Start over" /gtlt/pgt lt/formgt
ltpgtAlthough it is not usually done, I have
provided a link to the lta
href"../../template.txt"gttemplate filelt/agt so
you can study it.lt/pgt lt/bodygt lt/htmlgt
69Summary
- 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. - Someday, you may even be able to afford to hire a
programmer to do the programming for you!
70Review questions
- Explain the concept of the interactive Web and
discuss its advantages. How is the interactive
Web typically achieved? - Summarize the actions of a form and explain the
role played by controls, the form data set and
the form processing agent. - Explain the concept of a form data set and how it
relates to control names and current values. - Explain the interactions of IP, TCP, HTTP and the
Common Gateway Interface (CGI) during the process
of form submission? Distinguish between the GET
and POST methods of form submission. - Write a sample XHTML document containing a simple
form that collects a users name and e-mail
address and submits it to the form processing
agent with the URL http//amgilder.wcit.cs.unh.edu
/cgi-bin/echo.cgi. Add a reset button to the form
and be sure to label each control appropriately. - Discuss three mechanisms for improving the
accessibility of forms. - Expand your previous sample form to include some
radio buttons, checkboxes, menus and text areas.
Add some fieldsets and legends. Experiment with
tabbing order and access keys. - Explain the behavior of the form processing agent
named cgiemail. What role do the template file
and its associated merge fields play in this
process? - Alter your previous sample form to submit its
contents to cgiemail on the pubpages server. Be
sure to write the appropriate template file.
71Key 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
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
72XHTML elements presented
- ltfieldsetgtlt/fieldsetgt
- ltformgtlt/formgt
- ltinput /gt
- ltlabelgtlt/labelgt
- ltlegendgtlt/legendgt
- ltoptiongtlt/optiongt
- ltselectgtlt/selectgt
- lttextareagtlt/textareagt
73- 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