CS403: Online Network Exploration

1
CS403 Online Network Exploration

• Forms
• Spring, 2007
• Modified by Linda Kenney
• April 18, 2007

2
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.
• 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.

3
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.
• 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.

4
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.

5
Forms 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.

6
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, 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.

7
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.

8
What 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.

9
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.
• 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.

10
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.

11
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.
• 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.

12
What 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.

13
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
  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.

14
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.
• 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.

15
An example
16
Creating 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.

17
XHTML 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

18
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.

19
GET 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.

20
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.

21
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, 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
22
Creating 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.

23
Creating simple controls

• Virtually all forms will contain at least one
  text input control and a submit button.

24
XHTMLltinputgt tag Text box

• Used to accept text information
• Attributes
• typetext
• name
• size
• maxlength
• Value
• Code
• Email ltinput typetext nameemail idemail
  /gt

25
Text 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.

26
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.

27
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, 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?

28
XHTMLltinputgt 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

29
Submit 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.

30
XHTMLltinputgt 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
31
XHTMLltinputgt tag Reset Button

• Used to reset the form fields to their initial
  values.
• Attributes
• typereset
• name
• value

ltinput type"reset" valueReset" /gt
32
Labeling 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.

33
Labeling 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
34
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.

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
35
Radio 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.

36
Radio 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.

37
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 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

38
XHTMLltinputgt 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
39
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.
• Only those checked at the time of submission will
  be considered successful controls.

40
Checkbox 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

41
XHTMLltinputgt 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
42
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 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.

43
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 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.

44
Another 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
45
XHTMLltselectgt 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

46
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 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.

47
Menu 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.

48
XHTMLlttextareagt tag Scrolling Text Box

• Used to configure a scrolling text box
• Attributes
• name
• cols (take numeric values)
• rows (take numeric values)
• value

49
An 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
50
XHTML 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

51
Doing 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.

52
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.
• 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.

53
Cgiemail

• 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.

55
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.

56
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.
• 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.

57
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.

58

• http//www.sfsu.edu/training/cgiemail.htm

59
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
• 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

62
Example (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

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.

64
Processed 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

68
A 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
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.
• Someday, you may even be able to afford to hire a
  programmer to do the programming for you!

70
Review 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.

71
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

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
72
XHTML 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