Now that you have seen how FORM elements are defined, we can take some substantive
steps toward making our order form look more realistic (we'll get to making it perform more realistically soon!).
- We start by asking you to answer some questions about the FORM on our order form page.
This will both familiarize you with the code that you will be editing in the exercises
to follow and point you to examples that you can easily use to extend the page.
- What is the name of the FORM on the order form page?
- How many FORM elements (INPUT, SELECT) does the form contain?
- Why is only one title (Mr., Mrs., Ms., Dude) ever selected at a time?
- Why is the "discount" check box unchecked when the "Clear" button is clicked?
- Why are the name, street, city, and zip code text fields left blank after the "Clear" button is clicked, but all of the "Qty" fields contain zeroes?
- Now let's begin making some of those "realistic" changes to our order form.
In particular, do each of the following exercises one at a time. That is, edit
the HTML code and then check it out in the browser before moving on to the next exercise.
- Add a text field below the existing zip code field to allow the user to enter a "Country".
- Near the bottom of the form (between the discount checkbox and the "Clear" and "Submit" buttons) add a selection list that specifies which type of credit card (Visa, MasterCard, American Express, or Discover) will be used to pay for the order.
- Next to the selection list added in exercise b, above, add a text field to allow the user to enter a credit card number. Put an asterisk (*) next to this field (as was done with the "Name" field) to indicate that this information is required to submit an order.
- Add a selection list (you can add it directly to the "Nerd-chandise" table) that allows the user to specify a size (S, M, L, XL . . .) for any TAE-shirts ordered. We'll assume for the sake of these exercises that all shirts ordered from a given form will be the same size.
|