eg-259:lecture3
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-259:lecture3 [2012/05/14 21:25] – eechris | eg-259:lecture3 [2013/02/05 08:02] – [Form — method attribute] eechris | ||
---|---|---|---|
Line 3: | Line 3: | ||
====== Forms and Web User Interfaces ====== | ====== Forms and Web User Interfaces ====== | ||
- | **Contact Hour 4**: To be discussed on Tuesday | + | **Contact Hour 4**: To be discussed on Tuesday |
**Lecturer**: | **Lecturer**: | ||
Line 35: | Line 35: | ||
+ | ===== About the Examples ===== | ||
+ | Before these examples will work you will need to install the EG-259 Virtual Machine. | ||
+ | See the instructions at [[https:// | ||
Line 84: | Line 87: | ||
===== Forms ===== | ===== Forms ===== | ||
- | * A form is the usual way information is gotten from a browser | + | * 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 // | * The objects are called // | ||
Line 94: | Line 97: | ||
* The ''< | * The ''< | ||
- | |||
* All of the widgets must be defined in the content of a ''< | * All of the widgets must be defined in the content of a ''< | ||
+ | * There can be any number of independent forms on a single web page | ||
===== Form — action attribute ===== | ===== Form — action attribute ===== | ||
Line 102: | Line 105: | ||
action = | action = | ||
- | " | + | " |
* If the form has no '' | * If the form has no '' | ||
Line 109: | Line 112: | ||
* The '' | * The '' | ||
- | * The '' | + | * The actions of the '' |
- | * The '' | + | * The '' |
+ | ---- | ||
+ | |||
+ | The fact that the '' | ||
Line 158: | Line 164: | ||
<code html> | <code html> | ||
- | <form action=""> | + | <form action=" |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 198: | Line 204: | ||
===== Check-Box Widgets (Example) ===== | ===== Check-Box Widgets (Example) ===== | ||
- | Grocery Checklist: [[http://www.cpjobling.me/ | + | Grocery Checklist: [[http://localhost: |
< | < | ||
Line 205: | Line 211: | ||
Grocery Checklist | Grocery Checklist | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
<input type = " | <input type = " | ||
Line 223: | Line 229: | ||
**//Code for the Example//** | **//Code for the Example//** | ||
<code html> | <code html> | ||
- | | + | < |
- | <!-- checkbox.html | + | <!-- checkbox.html |
- | An example to illustrate a checkbox | + | An example to illustrate a checkbox |
- | --> | + | --> |
- | <html lang=" | + | <html lang=" |
- | < | + | < |
- | <meta charset=" | + | <meta charset=" |
- | < | + | < |
- | </ | + | </ |
- | < | + | <body> |
+ | <p> | ||
+ | Grocery Checklist | ||
+ | </ | ||
+ | <form action = "/ | ||
<p> | <p> | ||
- | | + | |
+ | value = " | ||
+ | Milk | ||
+ | <input type = " | ||
+ | value = " | ||
+ | Bread | ||
+ | <input type = " | ||
+ | value= " | ||
+ | Eggs | ||
</p> | </p> | ||
- | | + | |
- | < | + | </ |
- | <input type = " | + | </ |
- | value = " | + | |
- | Milk | + | |
- | <input type = " | + | |
- | value = " | + | |
- | Bread | + | |
- | <input type = " | + | |
- | value= " | + | |
- | Eggs | + | |
- | </ | + | |
- | </ | + | |
- | | + | |
- | </ | + | |
</ | </ | ||
- | |||
- | |||
===== Radio Button Widgets ===== | ===== Radio Button Widgets ===== | ||
Line 265: | Line 269: | ||
===== Radio Button Widgets (Example) ===== | ===== Radio Button Widgets (Example) ===== | ||
- | * Age category: [[http://www.cpjobling.me/ | + | * Age category: [[http://localhost: |
< | < | ||
Line 302: | Line 306: | ||
Age Category | Age Category | ||
</p> | </p> | ||
- | <form action = "handler"> | + | <form action = "/ |
<p> | <p> | ||
<input type = " | <input type = " | ||
Line 316: | Line 320: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 347: | Line 349: | ||
===== Menus (Example 1) ===== | ===== Menus (Example 1) ===== | ||
- | * Another grocery menu: [[http://www.cpjobling.me/ | + | * Another grocery menu: [[http://localhost: |
< | < | ||
Line 383: | Line 385: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 396: | Line 398: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 404: | Line 404: | ||
===== Menus (Example 2) ===== | ===== Menus (Example 2) ===== | ||
- | After changing size to 2: [[http://www.cpjobling.me/ | + | After changing size to 2: [[http://localhost: |
< | < | ||
Line 411: | Line 411: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 442: | Line 442: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
- | With < | + | With < |
- | Note use of < | + | <select name = " |
- | Ctrl-Click (Command-Click on Mac) to make multiple selections. | + | <option value = " |
- | <select name = " | + | <option value = " |
- | <option value=" | + | <option value = " |
- | <option value=" | + | <option value = " |
- | <option value=" | + | |
- | <option value=" | + | |
</ | </ | ||
</p> | </p> | ||
Line 458: | Line 456: | ||
</ | </ | ||
</ | </ | ||
- | |||
===== Text Area Widget ===== | ===== Text Area Widget ===== | ||
Line 473: | Line 470: | ||
===== Text Area (Example) ===== | ===== Text Area (Example) ===== | ||
- | An example to illustrate a textarea: [[http://www.cpjobling.me/ | + | An example to illustrate a textarea: [[http://localhost: |
< | < | ||
Line 480: | Line 477: | ||
Please provide your employment aspirations | Please provide your employment aspirations | ||
</p> | </p> | ||
- | <form action = "handler"> | + | <form action = "/ |
<p> | <p> | ||
< | < | ||
Line 493: | Line 490: | ||
<code html> | <code html> | ||
- | | + | < |
- | <!-- textarea.html | + | <!-- textarea.html |
- | An example to illustrate a textarea | + | An example to illustrate a textarea |
- | --> | + | --> |
- | <html lang=" | + | <html lang=" |
- | < | + | < |
- | <meta charset=" | + | <meta charset=" |
- | < | + | < |
- | </ | + | </ |
- | < | + | <body> |
+ | <p> | ||
+ | Please provide your employment aspirations | ||
+ | </ | ||
+ | <form action = "/ | ||
<p> | <p> | ||
- | | + | |
+ | (Be brief and concise) | ||
+ | </ | ||
</p> | </p> | ||
- | | + | |
- | < | + | </ |
- | < | + | </ |
- | (Be brief and concise) | + | |
- | </ | + | |
- | </ | + | |
- | </ | + | |
- | | + | |
- | </ | + | |
</ | </ | ||
- | |||
Line 610: | Line 606: | ||
* 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 637: | Line 634: | ||
===== Visitor Feeback Form ====== | ===== Visitor Feeback Form ====== | ||
- | * A visitor feedback form: [[http://www.cpjobling.me/ | + | * A visitor feedback form: [[http://localhost: |
---- | ---- | ||
Line 645: | Line 642: | ||
<h2> Visitor' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 702: | Line 699: | ||
<h2> Visitor' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 753: | Line 750: | ||
===== A sales order form ===== | ===== A sales order form ===== | ||
- | * A form for taking sales orders for popcorn: [[http://www.cpjobling.me/ | + | * A form for taking sales orders for popcorn: [[http://localhost: |
< | < | ||
Line 759: | Line 756: | ||
<h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2> | <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2> | ||
<form action= | <form action= | ||
- | "/ | + | "/ |
method=" | method=" | ||
<!-- A borderless table of text widgets for name and address --> | <!-- A borderless table of text widgets for name and address --> | ||
Line 859: | Line 856: | ||
< | < | ||
<h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2> | <h2> Welcome to Millennium Gymnastics Booster Club Popcorn Sales </h2> | ||
- | <form action= | + | <form action="/ |
- | | + | |
- | | + | |
<!-- A borderless table of text widgets for name and address --> | <!-- A borderless table of text widgets for name and address --> | ||
< | < | ||
Line 946: | Line 941: | ||
</ | </ | ||
</ | </ | ||
- | <hr /> | ||
Line 952: | Line 946: | ||
===== Demonstration ===== | ===== Demonstration ===== | ||
- | In the lecture, I shall use the [[http://www.getfirebug.com/|Firebug]] extension for the [[http:// | + | 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: |
===== Other Useful Form Elements ===== | ===== Other Useful Form Elements ===== | ||
eg-259/lecture3.txt · Last modified: 2013/02/05 12:23 by eechris