Description
Alice wants you to start working on an order form for customers who want to place their orders
online using the Red Ball Pizza Web site. She suggests that you create a prototype page in which
customers can enter their contact information for delivery and provide the ingredients for the
pizza they want Red Ball Pizza to make for them. Alice wants you to validate the Web form as
much as possible before it is sent to the Web server. She has created the file regex.txt, which
contain •s regular expression patterns for validating the customer’s phone number and preferred
time of delivery.
A preview of the form you’ll create is shown in the figure below as it appears in the Firefox
browser.
Action Items
Complete the following:
1. Use your text editor to open the ordertxt.htm and pizzatxt.css files from the HW6 folder
on your PC. 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{l0}$ |^ ((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]|l
[0l2]):[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 ful1.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 field set,
creating option groups for Mushrooms, Green Peppers, Onions, Tomatoes, and Jalapenos,
and naming the fields mushrooms, green peppers, onions, tomatoes, and jalapenos,
respectively.
19. Directly after the vegetables field set, create a check box for the doubleCheese field with
the label text Add Double Cheese. Create another check box for the doubleSauce field
with the label text Add Double Sauce.
20. Directly after the buildPizza field set, create a submit button with the button text Next.
21. Save your changes to the file, and then go to the pizza.css file in your text editor and
create the styles described in the following steps.
22. Display all field sets with a background color value of (255, 246, 205) and with a solid 1-
pixel border with the color value (233, 69, 0). Float the field sets on the left with a 1%
margin. Set the width of the custInfo field set to 35%, the width of the buildPizza field set
to 60%, and the widths of the meat and vegetables field sets to 47% each. Set the
background color of the meat and vegetables field sets to the (237, 178, 74) color value.
23. Set the font size of the field set legends to 0.9em.
24. Display all labels as blocks with a font size of 0.8em. Float the labels on the left only
when the left margin is clear. Set the label width to 40% of the containing element. Set
the top and bottom margins to 5 pixels and set the size of the left padding space to 5
pixels.
25. Display all input elements and textarea elements as blocks floated on the left. Set the
width to 50% with top and bottom margins of 5 pixels. Set the height of the textarea
elements to 100 pixels.
26. Display all inline images nested within a form as blocks floated on the left with top and
bottom margins of 5 pixels.
27. Set the width of the delTime input box to 150 pixels.
28. Set the left margin of the sizeimage inline image to 40%. Set the width of the size field
range slider to 200 pixels. Make the background of the size field range slider transparent.
29. Float the selection list for the crust field on the left with a font size of 0.8em. Set the top
and bottom margins to 5 pixels and the width to 150 pixels.
30. Set the width of the spinner control for the quantity field to 40 pixels.
31. Set the width of fieldset elements that belong to the optionGroup class to 50%. Remove
the border from the field set and make the background transparent.
32. Set the width of radio buttons to 30 pixels and the width of check boxes to 20 pixels.
33. Set the width of the submit button to 150 pixels, set the float property to none, and set the
top and bottom margins to 0 pixels and the left and right margins to auto.
34. If an input element, select element, or textarea element receives the focus, set the
background color to the value (220, 255, 220).
35. If an input element receives the focus and is valid, set the background color to the value
(220, 255, 220) displaying the background image okay.png at the bottom-right corner
with no tiling. Size the background image so that it’s contained within the input box. See
page 469 for assistance.
36. Repeat Step 35 for input elements that receive the focus and are invalid, setting the
background color to the value (255, 232, 233) and the background image to the file
warning.png. See page 469 for assistance.
37. Save your changes to the file and then load the order.htm file in your Web browser,
preferably a browser that has good support for HTML5 forms such as Firefox or Google
Chrome. Test the form by confirming that it shows warnings for all invalid data values
and for required fields that have no values.
Deliverables
use an archive program such as WinZip, IZArc, or 7-Zip to produce a ZIP file containing
all files in the HW6 folder on your PC that were used in this homework for your instructor
and submit it at the course drop box by the stated deadline.
PLEASE NOTE: It is expected that all of your HTML code be valid, well-formatted HTML code for this course. This applies to any and all HTML or CSS files submitted as part of any assignment for this course.
Your source code will be inspected at the W3C Mark Up Validation Service when it is submitted for grading.
Just because it renders well in one browser does not mean it will render well in all browsers. This is just one reason to validate your code prior to submitting it for grading!
One quick way to check your code for validity is to open the page in Firefox, then right click on the background of that page and click on the View Page Source option. This will open a new window where your HTML source will be color-coded to indicate any issues with it. Pay particular attention to any red lines or portions of code and work to correct these in your HTML source file (click HERE for how to do this in other common browsers). The W3C Mark Up Validation Service (for HTML pages), the W3C CSS Validation Service, and the W3C Link Checker are the best places to go to make sure your pages validate. Since you will not be
publishing your web pages to a server prior to submission, you will need to use the “Direct File Input” option to these services.
