Forms Order Software by khw12692

VIEWS: 5 PAGES: 73

More Info
									             CS403: Online Network Exploration


                          Forms
                       Spring, 2007

                   Modified by Linda Kenney
                         April 18, 2007




11/18/2010                 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.
                     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.



11/18/2010                              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.
                           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 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.
11/18/2010                                  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.




11/18/2010                CS403 Forms                4
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.

11/18/2010                     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.
11/18/2010                          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.


11/18/2010                                     CS403 Forms                                  7
What forms do
       It’s important to understand what forms do
       (and don’t do).

            Forms are strictly for collecting input from the
             user.

            They don’t actually act upon that input.




11/18/2010                      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.

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




11/18/2010                         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.




11/18/2010              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.

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


11/18/2010                          CS403 Forms                              11
What forms do (cont.)
            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.




11/18/2010                      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.

11/18/2010                         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.

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


11/18/2010                             CS403 Forms                                14
An example




11/18/2010   CS403 Forms   15
Creating a form
       A form is just a part of an XHTML document.

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




11/18/2010                     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


11/18/2010                             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.




11/18/2010               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.

            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.
11/18/2010                      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.

11/18/2010                           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">
   11/18/2010                               CS403 Forms                                    21
Creating a form (cont.)
       The contents of the <form> 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.



11/18/2010                      CS403 Forms                      22
Creating simple controls
       Virtually all forms will contain at least one
       text input control and a submit button.




11/18/2010                 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 />



11/18/2010                     CS403 Forms                   24
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 <input />
             element.

            This is an empty, replaced element, so it ends
             with a slash, not an end tag.




11/18/2010                     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.

11/18/2010                         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.


            If you want to assign an initial value to the text
             input control, use the value attribute. Why?

11/18/2010                         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 />
11/18/2010                     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.

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




11/18/2010                      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"/>

11/18/2010                   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" />


11/18/2010                  CS403 Forms              31
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 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.


11/18/2010                         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 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 <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>
11/18/2010                            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/cgi-
bin/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>




      11/18/2010                                         CS403 Forms                            34
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.


11/18/2010                      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.

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

11/18/2010                                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”
11/18/2010                          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 />


   11/18/2010                        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.
                     Only those checked at the time of submission will be considered
                      successful controls.


11/18/2010                              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”


11/18/2010                                 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>

 11/18/2010                         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.
11/18/2010                         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.

11/18/2010                           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"   value="visa" checked="checked" />
       Visa</label><br />
       <label><input name="ctype" type="radio"   value="mastercard" />
       Mastercard</label><br />
       <label><input name="ctype" type="radio"   value="amex" />
       American Express</label><br />
       <label><input name="ctype" type="radio"   value="discover" />
       Discover</label>
    </fieldset>

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




11/18/2010                                                      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




11/18/2010                      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.
                     When used with the multiple attribute, the size attribute determines how
                      many choices appear in the list as one time.


11/18/2010                                 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.
                     To specify a different option as the initially selected choice, set that
                      <option> element’s selected attribute to a value of “selected”.


11/18/2010                                    CS403 Forms                                                  47
XHTML<textarea> tag Scrolling Text Box
  Used to configure a scrolling text box
  Attributes:
        name
        cols (take numeric values)
        rows (take numeric values)
        value




11/18/2010                            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>




11/18/2010                                                     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>

      11/18/2010                     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.

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


11/18/2010                     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.


11/18/2010                                CS403 Forms                                             52
Cgiemail
             The form processing agent that we’re going
             to use to accomplish something practical is
             named cgiemail.

         1.    It takes the contents of the form that the
               browser submits and uses them to complete and
               send an e-mail message.

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

11/18/2010                      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.



11/18/2010                         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.
11/18/2010                        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.

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

11/18/2010                             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.
11/18/2010                          CS403 Forms                             57
       http://www.sfsu.edu/training/cgiemail.htm




11/18/2010              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/cgi-
    bin/cgiecho/~accountname/feedback.txt">
            Open your page (which includes the form) in a
             web browser.
            Enter information in the fields and press the
             submit button.
11/18/2010                      CS403 Forms                  59
11/18/2010   CS403 Forms   60
<form method="post" action="http://pubpages.unh.edu/cgi-
bin/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>



    11/18/2010                    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>
    11/18/2010                            CS403 Forms          62
Example (feedback.txt):

  From: [email] (optional, but a good idea)
  To: your-email-address
  CC: ltv6@unh.edu
  Subject: Sample Form
  Student: [group]
  Term: [term]
  Major: [major]
  My comments:
  [comments]

11/18/2010            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.
11/18/2010               CS403 Forms               64
Processed form looks like this:

       From: (some email address in here)
       To: your-email-address
        CC: ltv6@unh.edu
       Subject: Sample Form
       Date 01/01/1999
       Group: student
       Term: summer
       Major: Accounting
       My comments:


11/18/2010              CS403 Forms         65
       See   http://pubpages.unh.edu/~ltv6/form_comments1.html




11/18/2010                    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/cgi-
       bin/cgiemail/~accountname/feedback.txt">




11/18/2010                    CS403 Forms         67
       See

  http://pubpages.unh.edu/~ltv6/form_comments.html




11/18/2010                  CS403 Forms              68
A cgiemail example
                                                                                     To: cs403a@cisunix.unh.edu
                                                                                     From: [email]
                                                                                     Subject: Sample Feedback

                                                                                     Hi,

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"                            My name is [uname] and my e-mail address is [email].
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">                 I thought your site was [rating].
   <head>
     <title>Feedback form</title>                                                    [comments]
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   </head>                                                                           Best regards,
   <body>
     <h1>Feedback form</h1>                                                          [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"   value="great" checked="checked" />
         Great</label><br />
         <label><input name="rating" type="radio"   value="good" />
         Good</label><br />
         <label><input name="rating" type="radio"   value="average" />
         Average</label><br />
         <label><input name="rating" type="radio"   value="poor" />
         Poor</label><br />
         <label><input name="rating" type="radio"   value="horrible" />
         Horrible</label>
       </fieldset>

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




11/18/2010                                                                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.
                     Someday, you may even be able to afford to hire a programmer to do the
                      programming for you!



11/18/2010                                CS403 Forms                                          70
Key terms
  Button control                             GET method
  CGI                                        Interactive
  Cgiemail                                   Menu control
  Checkbox control                           Merge field
  Constant text                              Mutually exclusive choices
  Control                                    Possibly inclusive choices
  Control name                               POST method
  Control-name/current-value                 Radio button control
     pair                                    Successful control
  Current value                              Template file
  Dynamically generated page                 Text input control
  Form                                       Variable text
  Form data set
  Form processing agent

11/18/2010                     CS403 Forms                                71
XHTML elements presented
  <fieldset>…</fieldset>
  <form>…</form>
  <input />
  <label>…</label>
  <legend>…</legend>
  <option>…</option>
  <select>…</select>
  <textarea>…</textarea>



11/18/2010         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




11/18/2010               CS403 Forms                 73

								
To top