ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~

====== Forms and Web User Interfaces ======

**Contact Hour 4**: To be discussed on Tuesday 5th February, 2013.

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].

Forms are the most common way to communicate from a browser to a web server. They are also created
using HTML tags.

----

These notes are based on Sections 2.9 and 2.11 of Robert W. Sebasta, //Programming the World-Wide Web//, 3rd Edition, Addison Wesley, 2006.

This material is expanded in Chapter 3 of Nigel Chapman and Jenny Chapman, //Web Design: A complete introduction//, Wiley, 2006. 

Some additional attributes that have been added in HTML5 have been added to this discussion this year.


===== Forms and Web User Interfaces =====

  * In this lecture we complete our revision of the most commonly used subset of the Hypertext Markup Language (HTML).
  * We look at forms which are the most common way to communicate information from a user to a web server.
  * Forms are the user-interface of web applications.
  * As before, examples are on-line and code is reproduced in the handout.
  * The new form elements added by HTML5 will be discussed in a later session.

----
Further reading. E.g.: A different treatment of HTML given in Chapter 3 of Chapman and Chapman, //Web Design: a complete introduction//, John wiley, 2006 and Part I (Chapters 2-3) of the textbook Chris Bates, //Web Programming: Building Internet Applications//, 3rd Edition,
John Wiley, 2006. However, you should note that Bates tends to use the simpler form of HTML which is perfectly valid, but doesn't match the stricter conventions we are used to from our study of XHTML. You will find additional information about web forms and further examples in Chapter 14 of Elisabeth Freeman and Eric Freeman, //Head First HTML with CSS & XHTML//, O'Reilly Media,Inc., 2006. Information about the new attributes and new form elements are to be found in [[http://diveintohtml5.info/forms.html|Chapter 9 A Form of Madness]] of [[http://diveintohtml5.info|Dive Into HTML5]].





===== About the Examples =====

Before these examples will work you will need to install the EG-259 Virtual Machine.
See the instructions at [[https://github.com/cpjobling/eg-259-vm]].

  * Go directly to the examples: http://localhost:4567/eg-259/examples/lecture3
  * Browse the source code on GitHub: [[https://github.com/cpjobling/eg-259-vm/tree/master/web/eg-259/examples/lecture3|eg-259/examples/lecture3]]


===== Contents =====

User interfaces for Web Applications.
  * [[eg-259:lecture3#forms|Forms]]
  * [[eg-259:lecture3#user_interface_components_widgets|User Interface Components (Widgets)]]
  * [[eg-259:lecture3#useful_attributes_added_by_html5|Useful Attributes Added by HTML5]]
  * [[eg-259:lecture3#two_examples|Two Examples]]



===== Learning Outcomes ====

Consider converting these into multiple choice questions for the PeerWise exercise.

//At the end of this lecture you should be able to answer these questions//:

  - What are controls?
  - Which controls discussed in this session are created with the ''<input>'' tag?
  - What is the default size of a text control's text box?
  - What is the difference between the ''size'' and ''maxlength'' attributes of ''<input>'' for text controls?




===== Learning Outcomes – Forms (continued) =====

//At the end of this lecture you should be able to answer these questions//:

  - What is the difference in behaviour between a group of check box buttons and a group of radio buttons?
  - Under what circumstances is a menu used instead of a radio button group?
  - What is the drawback of specifying the ''multiple'' attribute with a menu?
  - How are scroll bars specified for text-area controls?

===== Learning Outcomes – Forms (continued) =====

//At the end of this lecture you should be able to answer these questions//:

  - What does the new HTML5 attribute ''placeholder'' do?
  - What is the new HTML5 attribute ''autofocus'' for?
  - What is the new HTML5 attribute ''required'' for?
  - Why is the choice of ''method="get"'' as the default for the form element a bad thing?

===== Forms =====

  * A form is the usual way information is gotten from a user to a web application
  * HTML has tags to create a collection of objects that implement this information gathering
  * The objects are called //controls// or //widgets// (e.g., radio buttons and checkboxes)
  * When the //submit// button of a form is clicked, the form's values are collected by the browser and are sent to the server in an HTTP request.



===== The Form Element =====

  * The ''<form>'' element is a container for a group of form widgets.
  * All of the widgets must be defined in the content of a ''<form>'' tag
  * There can be any number of independent forms on a single web page

===== Form — action attribute =====

  * The only required attribute of ''<form>'' is ''action'', which specifies the URI of the application that is to be called when the //Submit// button is clicked:

      action =
         "http://localhost:4567/cgi-bin/echo_params.cgi"

  * If the form has no ''action'' attribute, the value of ''action'' is the empty string
===== Form — method attribute =====


  * The ''method'' attribute of ''<form>'' specifies one of the two possible techniques of transferring the form data to the server, ''get'' and ''post''((Early drafts of the HTML5 added ''put'' and ''delete'' but these have been removed until more is known abut how these verbs should be implemented by browsers. See [[https://www.w3.org/Bugs/Public/show_bug.cgi?id=10671|HTML5 Bug 10671]].))
  * The actions of the ''get'' and ''post'' methods are discussed in great detail later in the module.
  * The ''get'' method is the default 

----

The fact that the ''get'' method is the default is not necessarily a good thing!








===== User Interface Components (Widgets) =====

  * HTML4/XHTML 1.0 has a relatively small set of user interface components
  * Most are created with the ''<input>'' tag
  * The type attribute of ''<input>'' specifies the kind of user input component or widget being created
  * HTML5 adds more input types and features, but browser support for these is patchy.

----

We will consider the full set of HTML5 form elements in a later session.


===== Widget types =====


  * The main types of widget are:
    * [[eg-259:lecture3#text_widgets|Text]]
    * [[eg-259:lecture3#check-box_widgets|Checkboxes]]
    * [[eg-259:lecture3#radio_button_widgets|Radio buttons]]
    * [[eg-259:lecture3#menus|Menus and menu items]]
    * [[eg-259:lecture3#text_area_widget|Text area]]
    * [[eg-259:lecture3#reset_and_submit_buttons|Submit and reset buttons]]



===== Text Widgets =====

**''<input type="text">''**

  * Creates a horizontal box for text input
  * Default size is 20 (characters); it can be changed with the ''size'' attribute
  * If more characters are entered than will fit, the box is scrolled (shifted) left
  * If you don't want to allow the user to type more characters than will fit, set ''maxlength'', which causes excess input to be ignored

===== An example =====


<code html>
    <form action="/cgi-bin/echo_params.cgi">
      <p>
        <label for="textinput">Enter something:</label> 
        <input id="textinput" type="text" name="Name" size="25" />
      </p>
    </form>
</code>

<html>
<div style="border: 2px solid blue; padding: 5px;">
    <form action="">
      <p>
        <label for="textinput">Enter something:</label> <input id="textinput" type="text" name="Name" size="25" />
      </p>
    </form>
</div>
</html>

----

Note the ''label'' element is used to define a label. The value of the attribute ''for'' should be an id reference. The label is linked to the form element with the matching id. 

It is quite common practice to give form elements an id because this can be used by JavaScript to identify the form element that fires an event, or as in this case, to relate the label to the corresponding form element. This is a useful accessibility feature. You might want to look at the remaining examples in this session to see if label is not more appropriate than the plain text used to label form widgets. 

See the formal definition of [[http://dev.w3.org/html5/markup/label.html|label]]


===== Check-box Widgets =====

**''<input type="checkbox">''**
  * Check-boxes are used to collect multiple choice input
  * Every check-box requires a ''value'' attribute, which is the widget's value in the form data when the check-box is 'checked'
  * A check-box that is not 'checked' contributes no value to the form data
  * By default, no check-box is initially 'checked'
  * To initialize a check-box to 'checked', the ''checked'' attribute must be present((In XHTML this must be ''checked="checked"''.))



===== Check-Box Widgets (Example) =====

Grocery Checklist: [[http://localhost:4567/eg-259/examples/lecture3/checkbox.html|checkbox.html]]

<html>
<div style="border: 2px solid blue; padding: 5px;">
      <p>
        Grocery Checklist
      </p>
      <form action = "/cgi-bin/echo_params.cgi">
        <p>
          <input type = "checkbox"  name = "groceries"
          value = "milk"  checked />
          Milk
          <input type = "checkbox"  name = "groceries"
          value = "bread" />
          Bread
          <input type = "checkbox"  name = "groceries"
          value= "eggs" />
          Eggs
        </p>
      </form>
</div>
</html>
----
**//Code for the Example//**
<code html>
<!DOCTYPE html>
<!-- checkbox.html
An example to illustrate a checkbox
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Checkboxes </title>
  </head>
  <body>
    <p>
      Grocery Checklist
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <input type = "checkbox"  name = "groceries"
        value = "milk"  checked />
        Milk
        <input type = "checkbox"  name = "groceries"
        value = "bread" />
        Bread
        <input type = "checkbox"  name = "groceries"
        value= "eggs" />
        Eggs
      </p>
    </form>
  </body>
</html>
</code>
===== Radio Button Widgets =====

**''<input type="radio">''**
  * Radio buttons are collections of check-boxes in which only one button can be 'checked' at a time
  * Every button in a radio button group **MUST** have the same name
  * If no button in a radio button group is 'pressed', the browser often 'presses' the first one



===== Radio Button Widgets (Example) =====

  * Age category: [[http://localhost:4567/eg-259/examples/lecture3/radio.html|radio.html]]

<html>
<div style="border: 2px solid blue; padding: 5px;">
    <p>
      Age Category
    </p>
    <form action = "handler">
      <p>
        <input type = "radio"  name = "age"  value = "under20" checked />
        0-19
        <input type = "radio"  name = "age"  value = "20-35" />
        20-35
        <input type = "radio"  name = "age"  value = "36-50" />
        36-50
        <input type = "radio"  name = "age"  value = "over50" />
        Over 50
      </p>
    </form>
</div>
</html>

----
<code html>
<!DOCTYPE html>
<!-- radio.html
An example to illustrate radio buttons
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Radio </title>
  </head>
  <body>
    <p>
      Age Category
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <input type = "radio"  name = "age"  value = "under20" checked />
        0-19
        <input type = "radio"  name = "age"  value = "20-35" />
        20-35
        <input type = "radio"  name = "age"  value = "36-50" />
        36-50
        <input type = "radio"  name = "age"  value = "over50" />
        Over 50
      </p>
    </form>
  </body>
</html>
</code>



===== Menus =====

**''<select name="..">''**
  * Menus are created with ''<select>'' tags
  * There are two kinds of menus, those that behave like check-boxes and those that behave like radio buttons (the default)
  * Menus that behave like check-boxes are specified by including the ''multiple'' attribute((which must be set to ''multiple="multiple"'' in XHTML))
  * The ''name'' attribute of ''<select>'' is required

===== Menu — size attribute =====


  * The ''size'' attribute of ''<select>'' can be included to specify the number of menu items to be displayed (the default is 1)
  * If ''size'' is set to > 1 or if ''multiple'' is specified, the menu is displayed as a pop-up menu

===== Menu Items =====

**''<option>''**
  * Each item of a menu is specified with an ''<option>'' tag
  * ''value'' attribute is the value returned when menu item is selected
  * Content of the ''<option>'' element is the value as presented to the user ... it need not be the same as that used in the ''value'' attribute.
  * An ''<option>'' tag can include the selected attribute which specifies that the item is preselected


===== Menus (Example 1) =====

  * Another grocery menu: [[http://localhost:4567/eg-259/examples/lecture3/menu.html|menu.html]]

<html>
    <div style="border: 2px solid blue; padding:5px">
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "">
      <p>
        With <code>size="1"</code> (the default)
        <select name = "groceries">
          <option value = "milk"> milk </option>
          <option value = "bread"> bread </option>
          <option value = "eggs"> eggs </option>
          <option value = "cheese"> cheese </option>
        </select>
      </p>
      </div>
</html>

----

<code html>
<!DOCTYPE html>
<!-- menu.html
An example to illustrate menus
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Menu </title>
  </head>
  <body>
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        With <code>size="1"</code> (the default)
        <select name = "groceries">
          <option value = "milk"> milk </option>
          <option value = "bread"> bread </option>
          <option value = "eggs"> eggs </option>
          <option value = "cheese"> cheese </option>
        </select>
      </p>
    </form>
  </body>
</html>
</code>



===== Menus (Example 2) =====

After changing size to 2: [[http://localhost:4567/eg-259/examples/lecture3/menu2.html|menu2.html]]

<html>
    <div style="border:2px solid blue; padding: 5px;">
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        With <code>size = "4"</code> (specified) and <code>multiple</code>. 
        Note use of <code>selected</code> because we always need bread!
        Ctrl-Click (Command-Click on Mac) to make multiple selections.
        <select name = "groceries" size="4" multiple>
          <option value="milk"> milk </option>
          <option value="bread" selected> bread </option>
          <option value="eggs"> eggs </option>
          <option value="cheese"> cheese </option>
        </select>
      </p>
      </div>
</html>

----

<code html>
<!DOCTYPE html>
<!-- menu.html
An example to illustrate menus
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Menu </title>
  </head>
  <body>
    <p>
      Grocery Menu - milk, bread, eggs, cheese
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        With <code>size = "4"</code> (specified) and <code>multiple</code>. 
        Note use of <code>selected</code> because we always need bread!
        Ctrl-Click (Command-Click on Mac) to make multiple selections.
        <select name = "groceries" size="4" multiple>
          <option value="milk"> milk </option>
          <option value="bread" selected> bread </option>
          <option value="eggs"> eggs </option>
          <option value="cheese"> cheese </option>
        </select>
      </p>
    </form>
  </body>
</html>
</code>

===== Text Area Widget =====


**''<textarea>''**

  * Text area created with ''<textarea>''
  * Usually include the ''rows'' and ''cols'' attributes to specify the size of the text area
  * Default text can be included as the content of ''<textarea>''
  * Scrolling is implicit if the area is overfilled


===== Text Area (Example) =====

An example to illustrate a textarea: [[http://localhost:4567/eg-259/examples/lecture3/textarea.html|textarea.html]]

<html>
<div style="border: 2px solid blue; padding: 5px;">
      <p>
        Please provide your employment aspirations
      </p>
      <form action = "/cgi-bin/echo_params.cgi">
        <p>
          <textarea name = "aspirations"  rows = "3"  cols = "40">
            (Be brief and concise) 
          </textarea>
        </p>
      </form>
</div>
</html>

----

<code html>
<!DOCTYPE html>
<!-- textarea.html
An example to illustrate a textarea
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Textarea </title>
  </head>
  <body>
    <p>
      Please provide your employment aspirations
    </p>
    <form action = "/cgi-bin/echo_params.cgi">
      <p>
        <textarea name = "aspirations"  rows = "3"  cols = "40">
          (Be brief and concise) 
        </textarea>
      </p>
    </form>
  </body>
</html>
</code>


===== Reset and Submit buttons =====

  * Both are created with <input>:
<code html>
    <input type = "reset" value = "Reset Form">
    <input type = "submit" value = "Submit Form">
</code>

<html>
<div style="border: 2px solid blue; padding: 5px">
<form action="">
    <input type = "reset" value = "Reset Form">
    <input type = "submit" value = "Submit Form">
</form>
</div>
</html>

----

  * Submit has two actions:
    - Encode the data of the form
    - Request that the server execute the server-resident program specified as the value of the action attribute of ''<form>''
  * A Submit button is required in every form
  * Reset 
    - returns all the controls on the page to their initial state (that is as they were when the web page was first loaded).
    - sends nothing to the server


===== Useful Attributes Added by HTML5 =====

  * HTML5 introduces many new form features, but not all are supported on all browsers.
  * However there are some attributes that work on modern browsers and degrade gracefully on older browsers.
  * They can thus be used today and will give users of modern browsers a better user experience while users of older browsers will not have a worse experience.
  * On older browsers there are methods of "back-porting" the same functionality with JavaScript.

----

For more on HTML5 forms see [[http://diveintohtml5.info/forms.html|Chapter 9 A Form of Madness on Dive Into HTML5]] which also includes information on the work-a-rounds for browsers that do not yet support the attributes discussed.

===== Placeholder Text =====

  * The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. 
  * Placeholder text is displayed inside the input field as long as the field is empty and not focused. 
  * As soon as you click on (or tab to) the input field, the placeholder text disappears.

===== Example of Placeholder Text ======

<code html>
<form>
  <input name="q" placeholder="enter query" />
  <input type="submit" value="Search" />
</form>
</code>

<html>
<div style="border: 2px solid blue; padding: 5px;">
<form>
  <input name="q" placeholder="enter query" />
  <input type="submit" value="Search" />
</form>
</div>
</html>
===== Autofocus ======

  * As an aid to accessibility and to make browsers more consistent, HTML5 introduces an //autofocus// attribute on all web form controls. 
  * The autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. 
  * But because it’s just markup instead of script, the behavior will be consistent across all web sites. 
  * Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.

===== Autofocus Example ======

<code html>
<form>
  <input name="q" autofocus />
  <input type="submit" value="Search" />
</form>
</code>

<html>
<div style="border: 2px solid blue; padding: 5px;">
<form>
  <input name="q" autofocus />
  <input type="submit" value="Search" />
</form>
</div>
</html>
===== Required Fields ======

  * In HTML5 forms you can specify that certain fields are required. 
  * Required fields must have a value before you can submit the form.

===== Example of a Required Field =====


The markup for required fields is as simple as can be:
<code html>
<form>
  <input id="q" required />
  <input type="submit" value="Search" />
</form>
</code>

As rendered: try submitting the form....
<html>
<div style="border: 2px solid blue; padding: 5px;">
<form>
  <input id="q" required />
  <input type="submit" value="Search" />
</form>
</div>
</html>
===== Two Examples =====

  * [[eg-259:lecture3#visitor_feeback_form|A visitor feedback form]]
  * [[eg-259:lecture3#a_sales_order_form|A sales order form]]


===== Visitor Feeback Form ======

  * A visitor feedback form: [[http://localhost:4567/eg-259/examples/lecture3/feedback.html|feedback.html]] from Bates with required fields, autofocus and placeholder text.

----

<html>
<div style="border: 2px solid blue; padding: 5px;">
    <h2> Visitor's Feedback </h2>
    <hr />
    <form action="/cgi-bin/echo_params.cgi" method="post">
      <p>
        <label for="yourName">Your Name:</label>
        <input type="text" id="yourName"
        name = "name"
        maxlength="32"
        size="16" 
        placeholder="enter your name" required autofocus />
      </p>
      <p>
        <label for="yourEmailAddress">Your E-Mail Address:</label>
        <input type="text" id="yourEmailAddress"
        name = "email"
        maxlength="32"
        size="16" 
        placeholder="you@example.com" required />
      </p>
      <p>
        <label for="selectYourLocation">Select Your Location:</label>
        <select name="country" id="selectYourLocation"
        size="1">
          <option value="United States"> United States </option>
          <option value="United Kingdom" selected> United Kingdom </option>
          <option value="Mexico"> Mexico </option>
          <option value="Brazil"> Brazil </option>
        </select>
      </p>
      <p>
        <label for="comments">Comments:</label>
        <br />
        <textarea name="comments" id="comments"
           rows="5"
           cols="35" placeholder="Please Enter Your Comments on this Site."></textarea>
      </p>
      <p>
        <input type="submit"
        name="feedback"
        value="Submit Details" />
      </p>
    </form>
    <hr />
</div>
</html>

<code html>
<!DOCTYPE html>
<!-- feedback.html
A simple feedback form.
-->
<html lang="en">
  <head>
    <meta char="utf-8">
    <title> Bill Smiggins Inc. </title>
  </head>
  <body>
    <h2> Visitor's Feedback </h2>
    <hr />
    <form action="/cgi-bin/echo_params.cgi" method="post">
      <p>
        <label for="yourName">Your Name:</label>
        <input type="text" id="yourName"
        name = "name"
        maxlength="32"
        size="16" required autofocus />
      </p>
      <p>
        <label for="yourEmailAddress">Your E-Mail Address:</label>
        <input type="text" id="yourEmailAddress"
        name = "email"
        maxlength="32"
        size="16" required />
      </p>
      <p>
        <label for="selectYourLocation">Select Your Location:</label>
        <select name="country" id="selectYourLocation"
        size="1">
          <option value="United States"
          selected="selected"> United States </option>
          <option value="United Kingdom"> United Kingdom </option>
          <option value="Mexico"> Mexico </option>
          <option value="Brazil"> Brazil </option>
        </select>
      </p>
      <p>
        <label for="comments">Comments:</label>
        <br />
        <textarea name="comments" id="comments"
           rows="5"
           cols="35" placeholder="Please Enter Your Comments on this Site."></textarea>
      </p>
      <p>
        <input type="submit"
        name="feedback"
        value="Submit Details" />
      </p>
    </form>
    <hr />
  </body>
</html>
</code>

If you want to include a long list such as all countries or US states, these are widely available for
download. But you need to take care with how the information will be presented. For example, you
might want to put the countries that you expect most of your customers to come from earlier in the
list. If you have an international audience, where will you get such a list in your viewer's language?

===== A sales order form =====

  * A form for taking sales orders for popcorn: [[http://localhost:4567/eg-259/examples/lecture3/popcorn.html|popcorn.html]] from Sebasta.

<html>
<div style="border: 2px solid blue; padding: 5px;">
    <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
    <form action=
    "/cgi-bin/echo_params.cgi"
    method="post">
      <!-- A borderless table of text widgets for name and address -->
      <table>
        <tr>
          <td><label for="buyersName">Buyer's Name:</label></td>
          <td>
          <input type="text" id="buyersName" name="name" size="30" 
                 placeholder="enter your name" required autofocus />
          </td>
        </tr>
        <tr>
          <td><label for="streetAddress">Street Address:</label></td>
          <td>
          <input type="text" id="streetAddress" name="street" size="30" 
                 placeholder="enter your street adderess" required />
          </td>
        </tr>
        <tr>
          <td><label for="cityStateZip">City, State, Zip:</label></td>
          <td>
          <input type="text" id="cityStateZip" name="city" size="30" 
                 placeholder="enter your City/State/Zip code" required />
          </td>
        </tr>
      </table><!-- A bordered table for item orders -->
      <table border="border">
        <!-- First, the column headings -->
        <tr>
          <th> Product Name </th>
          <th> Price </th>
          <th> Quantity </th>
        </tr><!-- Now, the table data entries -->
        <tr>
          <th><label for="unpopped">Unpopped Popcorn (1 lb.)</label></th>
          <td> $3.00 </td>
          <td>
          <input type="text" id="unpopped" name="unpop" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramel">Caramel Popcorn (2 lb. canister)</label></th>
          <td> $3.50 </td>
          <td>
          <input type="text" id="caramel" name="caramel" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramelNut">Caramel Nut Popcorn (2 lb. canister)</label></th>
          <td> $4.50 </td>
          <td>
          <input type="text" id="caramelNut" name="caramelnut" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="toffeyNut">Toffey Nut Popcorn (2 lb. canister)</label></th>
          <td> $5.00 </td>
          <td>
          <input type="text" id="toffeyNut" name="toffeynut" size="2" />
          </td>
        </tr>
      </table><!-- The radio buttons for the payment method -->
      <h3> Payment Method: </h3>
      <p>
        <input type="radio" name="payment" value="visa" checked />
        Visa
        <input type="radio" name="payment"
        value="mc" />
        Master Card
        <input type="radio" name=
        "payment" value="discover" />
        Discover
        <input type=
        "radio" name="payment" value="cheque" />
        Cheque
        <br />
      </p><!-- The submit and reset buttons -->
      <p>
        <input type="submit" value="Submit Order" />
        <input type=
        "reset" value="Clear Order Form" />
      </p>
    </form>
</div>
</html>

----

<code html>
<!DOCTYPE html>
<!-- popcorn.html
This describes popcorn sales form page
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Popcorn Sales Form </title>
  </head>
  <body>
    <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
    <form action="/cgi-bin/echo_params.cgi" method="post">
      <!-- A borderless table of text widgets for name and address -->
      <table>
        <tr>
          <td><label for="buyersName">Buyer's Name:</label></td>
          <td>
          <input type="text" id="buyersName" name="name" size="30" 
                 placeholder="enter your name" required autofocus />
          </td>
        </tr>
        <tr>
          <td><label for="streetAddress">Street Address:</label></td>
          <td>
          <input type="text" id="streetAddress" name="street" size="30" 
                 placeholder="enter your street adderess" required />
          </td>
        </tr>
        <tr>
          <td><label for="cityStateZip">City, State, Zip:</label></td>
          <td>
          <input type="text" id="cityStateZip" name="city" size="30" 
                 placeholder="enter your City/State/Zip code" required />
          </td>
        </tr>
      </table><!-- A bordered table for item orders -->
      <table border="border">
        <!-- First, the column headings -->
        <tr>
          <th> Product Name </th>
          <th> Price </th>
          <th> Quantity </th>
        </tr><!-- Now, the table data entries -->
        <tr>
          <th><label for="unpopped">Unpopped Popcorn (1 lb.)</label></th>
          <td> $3.00 </td>
          <td>
          <input type="text" id="unpopped" name="unpop" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramel">Caramel Popcorn (2 lb. canister)</label></th>
          <td> $3.50 </td>
          <td>
          <input type="text" id="caramel" name="caramel" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="caramelNut">Caramel Nut Popcorn (2 lb. canister)</label></th>
          <td> $4.50 </td>
          <td>
          <input type="text" id="caramelNut" name="caramelnut" size="2" />
          </td>
        </tr>
        <tr>
          <th><label for="toffeyNut">Toffey Nut Popcorn (2 lb. canister)</label></th>
          <td> $5.00 </td>
          <td>
          <input type="text" id="toffeyNut" name="toffeynut" size="2" />
          </td>
        </tr>
      </table><!-- The radio buttons for the payment method -->
      <h3> Payment Method: </h3>
      <p>
        <input type="radio" name="payment" value="visa" checked />
        Visa
        <input type="radio" name="payment"
        value="mc" />
        Master Card
        <input type="radio" name=
        "payment" value="discover" />
        Discover
        <input type=
        "radio" name="payment" value="cheque" />
        Cheque
        <br />
      </p><!-- The submit and reset buttons -->
      <p>
        <input type="submit" value="Submit Order" />
        <input type=
        "reset" value="Clear Order Form" />
      </p>
    </form>
  </body>
</html>
</code>



===== Demonstration =====

In the lecture, I shall use the [[https://developers.google.com/chrome-developer-tools/docs/overview|Chrome Developer tools]] to examine the  HTTP request and response from the [[http://localhost:4567/eg-259/examples/lecture3/popcorn.html|example form]]. Try it yourself see [[eg-259:homework:3#further_exercise|homework problems]].
===== Other Useful Form Elements =====

There are some other basic form elements that we don't have time to discuss here, but are nonetheless useful:

  * We have already mentioned the ''<label>'' element.
  * The ''<fieldset>'' element is another useful container element that used to visually group related form elements.
  * The ''<button>'' element is useful way to create a button that can be attached to a JavaScript event handler when you don't want to submit anything to the server or when you want to be able to have richer content than the submit button will allow.

For more information about these see: [[http://reference.sitepoint.com/html/elements-form|Form Elements]] on the SitePoint reference site.
===== Summary of this Lecture =====

User interfaces for Web Applications.
  * [[eg-259:lecture3#forms|Forms]]
  * [[eg-259:lecture3#user_interface_components_widgets|User Interface Components (Widgets)]]
  * [[eg-259:lecture3#useful_attributes_added_by_html5|Useful Attributes Added by HTML5]]
  * [[eg-259:lecture3#two_examples|Two Examples]]



===== Learning Outcomes ====

Don't forget to consider converting these into multiple choice questions for the PeerWise exercise.

//At the end of this lecture you should be able to answer these questions//:

  - What are controls?
  - Which controls discussed in this session are created with the ''<input>'' tag?
  - What is the default size of a text control's text box?
  - What is the difference between the size and maxlength attributes of ''<input>'' for text controls?


===== Learning Outcomes – Forms (continued) =====

//At the end of this lecture you should be able to answer these questions//:

  - What is the difference in behaviour between a group of check box buttons and a group of radio buttons?
  - Under what circumstances is a menu used instead of a radio button group?
  - What is the drawback of specifying the multiple attribute with a menu?
  - How are scroll bars specified for text-area controls?

===== Learning Outcomes – Forms (continued) =====

//At the end of this lecture you should be able to answer these questions//:

  - What does the new HTML5 attribute ''placeholder'' do?
  - What is the new HTML5 attribute ''autofocus'' for?
  - What is the new HTML5 attribute ''required'' for?
  - Why is the choice of ''method="get"'' as the default for the form element a bad thing?

===== Exercises to demonstrate forms =====

  - Create, test and validate an XHTML document that has a form with the following controls:
    - A text box to collect the user's name
    - Four check boxes, one each for the following items:
      - Four 100-Watt light bulbs for £1.39
      - Eight 100-Watt light bulbs for £2.49
      - Four 100-Watt, long-life light bulbs for £2.29
      - Eight 100-Watt, long-life light bulbs for £4.29
    -  A collection of three radio buttons that are labeled as follows:
       - Visa
       - Mastercard
       - Switch

===== Exercises to demonstrate forms (continued) =====

  - Add a submit button labeled ''checkout'' and a reset button labeled ''cancel'' to the form created in Exercise 1.
  - Add a menu to the form created in Exercise 1 to select a delivery method. E.g. choice of //next day delivery//, //1st class post//, //free post//, //courier//, etc. Make //1st class post// the default delivery method.
  - Add a text area to the form created in Exercise 1 to collect user feedback.
  - Add ''<label for>'' elements to the text fields added in Exercise and link them to suitable ''id'' attributes in the associated widgets.

===== Exercises to demonstrate forms (New HTML5 Attributes) =====

  - Add a HTML5 attribute ''placeholder'' to the name text field and provide a suitable user hint.
  - Add the HTML5 ''required'' attribute to the name text field.
  - Add the HTML5 ''autofocus'' attribute to put the initial form focus on the name text field.
===== Homework Exercises =====

All the exercises in this lecture were taken from Chapter 2 of Robert W. Sebasta, //Programming the
World-Wide Web//, 3rd Edition, Addison Wesley, 2006. They are gathered together here in a [[eg-259:homework:3|homework sheet]] for your convenience.



===== What's Next? =====

**Web Applications**

   * [[eg-259:lecture4#web_applications|Web Applications]]
   * [[eg-259:lecture4#the_lamp_platform|The LAMP platform]]
   * [[eg-259:lecture4#some_example_web_applications|Some Example Web Applications]]

[[eg-259:lecture2|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture4|Next Lecture]]