ICCT Wiki

User Tools

Site Tools

Trace:
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
Last revisionBoth sides next revision
eg-259:lecture3 [2013/02/04 15:56] – [Form — action attribute] eechriseg-259:lecture3 [2013/02/05 08:12] – eechris
Line 87: Line 87:
 ===== 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 97:
  
   * 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 112:
  
   * 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 161: Line 164:
  
 <code html> <code html>
-    <form action="">+    <form action="/cgi-bin/echo_params.cgi">
       <p>       <p>
         <label for="textinput">Enter something:</label>          <label for="textinput">Enter something:</label> 
Line 208: Line 211:
         Grocery Checklist         Grocery Checklist
       </p>       </p>
-      <form action = "">+      <form action = "/cgi-bin/echo_params.cgi">
         <p>         <p>
           <input type = "checkbox"  name = "groceries"           <input type = "checkbox"  name = "groceries"
Line 226: Line 229:
 **//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 305: Line 306:
       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 319: Line 320:
   </body>   </body>
 </html> </html>
- 
 </code> </code>
- 
  
  
Line 386: Line 385:
       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 399: Line 398:
   </body>   </body>
 </html> </html>
- 
 </code> </code>
- 
  
  
Line 414: Line 411:
       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 445: Line 442:
       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 461: Line 458:
 </html> </html>
 </code> </code>
- 
  
 ===== Text Area Widget ===== ===== Text Area Widget =====
Line 483: Line 479:
         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 496: Line 492:
  
 <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 613: Line 608:
   * 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 648: Line 644:
     <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 705: Line 701:
     <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 762: Line 758:
     <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 862: Line 858:
   <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 949: Line 943:
 </html> </html>
 </code> </code>
-    <hr /> 
  
  
Line 955: Line 948:
 ===== 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.txt · Last modified: 2013/02/05 12:23 by eechris