Creating a Web Form - HTML, CSS, and Dynamic HTML - page 472

Complete the following:
1. Use your text editor to open the ordertxt.htm and pizzatxt.css files from the
tutorial.06\review folder included with your Data Files. Enter your name and the
date within the comment section of each file, and then save them as order.htm and
pizza.css , respectively.
2. Go to the order.htm file in your text editor. Link the file to the pizza.css style
sheet file.
3. Directly below the paragraph in the section element, insert a form element with
the name and id pizza that has the action http://www.redballpizza.com/cgi-bin/
buildpizza and uses the post method.
4. Create two field sets with the ids custInfo and buildPizza , and with the legend
text customer information and build your Own Pizza , respectively.
5. Within the custInfo field set, create a label with the text name * along with a text
input box for the custname field. Add the placeholder text first and last name and
make the field required.
6. Create a text area box for the address field along with the label Delivery address * .
Make the address field required.
7. Create a label containing the text Phone * and text input box for the phone
field. Add the placeholder text (nnn) nnn-nnnn and make the field required.
The text of the input box should follow the regular expression pattern
^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$ .
8. Create a text input box for the delTime field with the label text Delivery time (leave
blank for immediate delivery) , with the parenthetical text placed on a new line.
Add the placeholder text hh:mm am/Pm and specify the regular expression pattern
^([0-9]|1[012]):[0-5][0-9]\s?((a|p)m|(A|P)M)$ .
9. Within the buildPizza field set, add the sizes.png file as an inline image. Add the
id sizeimage to the inline image.
10. Create a range slider for the size field along with the label text select your Pizza
size (10, 12, or 14 inch) , placing the parenthetical text on a new line. Set the default
value to 12, the minimum value to 10, the maximum to 14, and the step value to 2.
11. Create a selection list for the crust field along with the label text choose your
crust . The selection list should display the option text thin , thick , stuffed , and Pan
with option values equal to the option text.
12. Create a number spinner for the quantity field with the label text Quantity (call for
quantities larger than 10 pizzas) , with the parenthetical text on a new line. The field
has a default value of 1 and ranges from 1 to 10 increments of 1 unit.
13. Create a text area for the instructions field with the label text special
instructions .
14. Within the buildPizza field set, create two field sets with the ids meat and
vegetables , and with the legend text meat toppings and vegetable toppings ,
respectively.
15. Within the meat field set, add a label with the text location followed by four inline
images for the full.png , left.png , right.png , and none.png files with the alternate text
full , left , right , and none , respectively.
16. Create a group of four option buttons for the pepperoni field with the field values full ,
left , right , and none , respectively. Make the none option checked by default. Nest the
four option buttons within a fieldset element belonging to the optionGroup class.
17. Repeat the previous step for the remaining meat toppings, Ham, Pork, Sausage, and
Chicken, naming the fields ham , pork , sausage , and chicken , respectively.
18. Repeat Steps 15 through 17 for the vegetable toppings within the vegetables ield
set, creating option groups for Mushrooms, Green Peppers, Onions, Tomatoes, and
Jalapenos, and naming the fields mushrooms , green peppers , onions , tomatoes ,
and jalapenos , respectively.