eg-259:lecture3
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:lecture3 [2013/02/04 16:27] – [Check-Box Widgets (Example)] eechris | eg-259:lecture3 [2013/02/05 12:23] (current) – [About the Examples] eechris | ||
---|---|---|---|
Line 40: | Line 40: | ||
See the instructions at [[https:// | See the instructions at [[https:// | ||
+ | * Go directly to the examples: http:// | ||
+ | * Browse the source code on GitHub: [[https:// | ||
Line 87: | Line 88: | ||
===== 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 98: | ||
* 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 112: | Line 113: | ||
* The '' | * The '' | ||
- | * The '' | + | * The actions of the '' |
- | * The '' | + | * The '' |
+ | |||
+ | ---- | ||
+ | The fact that the '' | ||
Line 303: | Line 307: | ||
Age Category | Age Category | ||
</p> | </p> | ||
- | <form action = "handler"> | + | <form action = "/ |
<p> | <p> | ||
<input type = " | <input type = " | ||
Line 317: | Line 321: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 384: | Line 386: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 397: | Line 399: | ||
</ | </ | ||
</ | </ | ||
- | |||
</ | </ | ||
- | |||
Line 412: | Line 412: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 443: | Line 443: | ||
Grocery Menu - milk, bread, eggs, cheese | Grocery Menu - milk, bread, eggs, cheese | ||
</p> | </p> | ||
- | <form action = ""> | + | <form action = "/ |
<p> | <p> | ||
With < | With < | ||
Line 459: | Line 459: | ||
</ | </ | ||
</ | </ | ||
- | |||
===== Text Area Widget ===== | ===== Text Area Widget ===== | ||
Line 481: | Line 480: | ||
Please provide your employment aspirations | Please provide your employment aspirations | ||
</p> | </p> | ||
- | <form action = "handler"> | + | <form action = "/ |
<p> | <p> | ||
< | < | ||
Line 494: | Line 493: | ||
<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 611: | 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 646: | Line 645: | ||
<h2> Visitor' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 703: | Line 702: | ||
<h2> Visitor' | <h2> Visitor' | ||
<hr /> | <hr /> | ||
- | <form action="/ | + | <form action="/ |
<p> | <p> | ||
<label for=" | <label for=" | ||
Line 760: | 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= | ||
- | "/ | + | "/ |
method=" | method=" | ||
<!-- A borderless table of text widgets for name and address --> | <!-- A borderless table of text widgets for name and address --> | ||
Line 860: | Line 859: | ||
< | < | ||
<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 947: | Line 944: | ||
</ | </ | ||
</ | </ | ||
- | <hr /> | ||
Line 953: | Line 949: | ||
===== 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.1359995236.txt.gz · Last modified: 2013/02/04 16:27 by eechris