ICCT Wiki

User Tools

Site Tools

Trace: • lecture3 • lecture14
eg-259:lecture3

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:lecture3 [2013/02/04 16:26] – [Check-Box Widgets (Example)] eechriseg-259:lecture3 [2013/02/05 12:23] (current) – [About the Examples] eechris
Line 40: Line 40:
 See the instructions at [[https://github.com/cpjobling/eg-259-vm]]. 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]]
  
  
Line 87: Line 88:
 ===== Forms ===== ===== Forms =====
  
-  * A form is the usual way information is gotten from a browser to a server+  * 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   * 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)   * The objects are called //controls// or //widgets// (e.g., radio buttons and checkboxes)
Line 97: Line 98:
  
   * The ''<form>'' element is a container for a group of form widgets.   * 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   * 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 ===== ===== Form — action attribute =====
Line 112: Line 113:
  
   * 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 ''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 ''get'' and ''post'' are discussed in great detail later in the module. +  * The actions of the ''get'' and ''post'' methods are discussed in great detail later in the module. 
-  * The ''get'' method is the default and this is not necessarily a good thing!+  * The ''get'' method is the default  
 + 
 +----
  
 +The fact that the ''get'' method is the default is not necessarily a good thing!
  
  
Line 226: Line 230:
 **//Code for the Example//** **//Code for the Example//**
 <code html> <code html>
-  <!DOCTYPE html> +<!DOCTYPE html> 
-  <!-- checkbox.html +<!-- checkbox.html 
-  An example to illustrate a checkbox +An example to illustrate a checkbox 
-  --> +--> 
-  <html lang="en"> +<html lang="en"> 
-    <head> +  <head> 
-      <meta charset="utf-8" /> +    <meta charset="utf-8" /> 
-      <title> Checkboxes </title> +    <title> Checkboxes </title> 
-    </head> +  </head> 
-    <body>+  <body> 
 +    <p> 
 +      Grocery Checklist 
 +    </p> 
 +    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
-        Grocery Checklist+        <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>       </p>
-      <form action = ""> +    </form> 
-        <p> +  </body> 
-          <input type = "checkbox"  name = "groceries" +</html>
-          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> </code>
- 
 ===== Radio Button Widgets ===== ===== Radio Button Widgets =====
  
Line 304: Line 307:
       Age Category       Age Category
     </p>     </p>
-    <form action = "handler">+    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
         <input type = "radio"  name = "age"  value = "under20" checked />         <input type = "radio"  name = "age"  value = "under20" checked />
Line 318: Line 321:
   </body>   </body>
 </html> </html>
- 
 </code> </code>
- 
  
  
Line 385: Line 386:
       Grocery Menu - milk, bread, eggs, cheese       Grocery Menu - milk, bread, eggs, cheese
     </p>     </p>
-    <form action = "">+    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
         With <code>size="1"</code> (the default)         With <code>size="1"</code> (the default)
Line 398: Line 399:
   </body>   </body>
 </html> </html>
- 
 </code> </code>
- 
  
  
Line 413: Line 412:
       Grocery Menu - milk, bread, eggs, cheese       Grocery Menu - milk, bread, eggs, cheese
     </p>     </p>
-    <form action = "">+    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
         With <code>size = "4"</code> (specified) and <code>multiple</code>.          With <code>size = "4"</code> (specified) and <code>multiple</code>. 
Line 444: Line 443:
       Grocery Menu - milk, bread, eggs, cheese       Grocery Menu - milk, bread, eggs, cheese
     </p>     </p>
-    <form action = "">+    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
         With <code>size = "4"</code> (specified) and <code>multiple</code>.          With <code>size = "4"</code> (specified) and <code>multiple</code>. 
Line 460: Line 459:
 </html> </html>
 </code> </code>
- 
  
 ===== Text Area Widget ===== ===== Text Area Widget =====
Line 482: Line 480:
         Please provide your employment aspirations         Please provide your employment aspirations
       </p>       </p>
-      <form action = "handler">+      <form action = "/cgi-bin/echo_params.cgi">
         <p>         <p>
           <textarea name = "aspirations"  rows = "3"  cols = "40">           <textarea name = "aspirations"  rows = "3"  cols = "40">
Line 495: Line 493:
  
 <code html> <code html>
-  <!DOCTYPE html> +<!DOCTYPE html> 
-  <!-- textarea.html +<!-- textarea.html 
-  An example to illustrate a textarea +An example to illustrate a textarea 
-  --> +--> 
-  <html lang="en"> +<html lang="en"> 
-    <head> +  <head> 
-      <meta charset="utf-8" /> +    <meta charset="utf-8" /> 
-      <title> Textarea </title> +    <title> Textarea </title> 
-    </head> +  </head> 
-    <body>+  <body> 
 +    <p> 
 +      Please provide your employment aspirations 
 +    </p> 
 +    <form action = "/cgi-bin/echo_params.cgi">
       <p>       <p>
-        Please provide your employment aspirations+        <textarea name = "aspirations"  rows = "3"  cols = "40"> 
 +          (Be brief and concise)  
 +        </textarea>
       </p>       </p>
-      <form action = "handler"> +    </form> 
-        <p> +  </body> 
-          <textarea name = "aspirations"  rows = "3"  cols = "40"> +</html>
-            (Be brief and concise)  +
-          </textarea> +
-        </p> +
-      </form> +
-    </body> +
-  </html>+
 </code> </code>
- 
  
  
Line 612: Line 609:
   * Required fields must have a value before you can submit the form.   * Required fields must have a value before you can submit the form.
  
-====== Example of a Required Field ======+===== Example of a Required Field ===== 
  
 The markup for required fields is as simple as can be: The markup for required fields is as simple as can be:
Line 647: Line 645:
     <h2> Visitor's Feedback </h2>     <h2> Visitor's Feedback </h2>
     <hr />     <hr />
-    <form action="/cgi-bin/echo_form.cgi" method="post">+    <form action="/cgi-bin/echo_params.cgi" method="post">
       <p>       <p>
         <label for="yourName">Your Name:</label>         <label for="yourName">Your Name:</label>
Line 704: Line 702:
     <h2> Visitor's Feedback </h2>     <h2> Visitor's Feedback </h2>
     <hr />     <hr />
-    <form action="/cgi-bin/echo_form.cgi" method="post">+    <form action="/cgi-bin/echo_params.cgi" method="post">
       <p>       <p>
         <label for="yourName">Your Name:</label>         <label for="yourName">Your Name:</label>
Line 761: Line 759:
     <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>     <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
     <form action=     <form action=
-    "/cgi-bin/echo_form.cgi"+    "/cgi-bin/echo_params.cgi"
     method="post">     method="post">
       <!-- A borderless table of text widgets for name and address -->       <!-- A borderless table of text widgets for name and address -->
Line 861: Line 859:
   <body>   <body>
     <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>     <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2>
-    <form action= +    <form action="/cgi-bin/echo_params.cgi" method="post">
-    "/cgi-bin/echo_form.cgi" +
-    method="post">+
       <!-- A borderless table of text widgets for name and address -->       <!-- A borderless table of text widgets for name and address -->
       <table>       <table>
Line 948: Line 944:
 </html> </html>
 </code> </code>
-    <hr /> 
  
  
Line 954: Line 949:
 ===== Demonstration ===== ===== Demonstration =====
  
-In the lecture, I shall use the [[http://www.getfirebug.com/|Firebug]] extension for the [[http://www.mozilla-europe.org/en/products/firefox/|Firefox web browser]] 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]]. +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 ===== ===== Other Useful Form Elements =====
  
eg-259/lecture3.1359995185.txt.gz · Last modified: 2013/02/04 16:26 by eechris