eg-259:lecture3
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
eg-259:lecture3 [2013/02/04 15:54] – eechris | eg-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 | + | * 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 97: | 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 105: | Line 105: | ||
action = | action = | ||
- | " | + | " |
* If the form has no '' | * If the form has no '' | ||
Line 112: | Line 112: | ||
* The '' | * The '' | ||
- | * The '' | + | * The actions of the '' |
- | * The '' | + | * The '' |
+ | ---- | ||
+ | |||
+ | The fact that the '' | ||
Line 161: | Line 164: | ||
<code html> | <code html> | ||
- | <form action=""> | + | <form action=" |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 208: | Line 211: | ||
Grocery Checklist | Grocery Checklist | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
<input type = " | <input type = " | ||
Line 226: | 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 305: | Line 306: | ||
Age Category | Age Category | ||
</p> | </p> | ||
- | <form action = "handler"> | + | <form action = "/ |
<p> | <p> | ||
<input type = " | <input type = " | ||
Line 319: | Line 320: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 386: | 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 399: | Line 398: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 414: | 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 445: | Line 442: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 461: | Line 458: | ||
</ | </ | ||
</ | </ | ||
- | |||
===== 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 = "/ |
<p> | <p> | ||
< | < | ||
Line 496: | Line 492: | ||
<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 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' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 705: | Line 701: | ||
<h2> Visitor' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
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= | ||
- | "/ | + | "/ |
method=" | method=" | ||
<!-- A borderless table of text widgets for name and address --> | <!-- A borderless table of text widgets for name and address --> | ||
Line 862: | Line 858: | ||
< | < | ||
<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 949: | Line 943: | ||
</ | </ | ||
</ | </ | ||
- | <hr /> | ||
Line 955: | Line 948: | ||
===== 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:// |
===== Other Useful Form Elements ===== | ===== Other Useful Form Elements ===== | ||
eg-259/lecture3.txt · Last modified: 2013/02/05 12:23 by eechris