This portion of the lab focuses on processing the results from forms that have been submitted using method="get". We will start with two small example files that exhibit most of the necessary techniques: getinfo.html and useinfo.html. You will also need the form processing script file formproc.js.
To Do
Begin by adding some features to the page similar to those that are already there. First, add a text box to the form page asking the user what their favorite food is. Then change the processing page to add a statement reflecting that food -- either "We're having pizza tonight!" (assuming they entered pizza) or "Leftovers for dinner tonight" if they didn't enter anything. You can base the script for this part on the "Hello World!" script.
Next, add a new menu item to the processing page, allowing them to choose the font size. Offer at least three size choices. Note that you should use the technique shown in the Comic Sans option to make the label that appears in the menu differ from the value actually returned by the form. For example, one of the options might look like this:
<option value="12pt">12 point</option>
When you are done modifying the form, update the processing page so that it applies the chosen font size to the body of the document. You should do this by adding additional commands to the body of the applyChoices() function, using what's there already as an example.
Finally, if you finish the above, experiment with different ways that form results can interact with images. The lower part of the processing page has two images, each generated in a different manner. (One is an ordinary <img> tag; the other is an <img> tag written by a script.)
You will add a third menu to the form, asking the user to pick between the three animal images we used earlier (rooster, pig, and horse). The processing page should then include the image of the chosen animal twice, using two different methods:
- Change the script that writes the second <img> tag so that it writes a tag that includes the chosen src.
- Add more commands in the applyChoices() function so that src of the first <img> element is changed to point to the appropriate image.