Alice wants you to start work on an online order form for customers to place orders through the Red Ball Pizza website. The form will span several pages in which customers will specify whether the order is for pickup or delivery and will indicate the toppings they want on their pizza(s). Figure 7-59 shows a preview of the form customers will use to indicate their delivery option (including an address or pickup and at what time they want their order). Figure 7-59 Red ball Pizza form for customer Data Alice has already written some of the HTML code for the web pages and designed many of the style sheets. Your job will be to write the code for the form elements and validation styles. Complete the following: 1. Use your HTML editor to open the rb_customer_txt.html, rb_build_txt.html, and rb_validate_ txt.css files from the html07 review folder. Enter your name and the date in the comment section of each file, and save them as rb_customer.html, rb_build.html and rb_validate.css respectively. 2. Return to the rb_customer.html file in your editor. Within the document head, insert links to the rb_forms2.css and rb_validate.css files. 3. Still within the document head, use the script element to link the file to the rb_formsubmit2.js file. 4. Scroll down to the section element and, directly after the initial paragraph, insert a form element that employs the action at the fictional address http://www.example.com/redball/ customer using the post method. 5. Within the form element, insert a div element that encloses a label with the text Name* associated with the nameBox control. Also, within the div element, add an input text box with the ID namebox, field name custName, and placeholder text First and Last Name. Make custName a required field. 6. Create a second div element in the web form that encloses a label with the text Phone* associated with the phoneBox control. Within the div element, add an input box with the ID phonebox, field name custPhone, and placeholder text (nnn) nnn-nnnn. Make custPhone a required field and have any text entry follow the regular expression pattern ^\d{10}$|^(\ (\d{3}\)\s*)?\d{3}[\s-]?\d{4}$. (Note: You can copy the regular expression code from the rb_regex2.txt file.) 7. Add another div element to the web form containing the following code: a. Insert an input element to create an option button for the ordertype field with the ID delivery. Make the option button checked by default. After the option button, insert a label associated with the delivery control containing the text Delivery. b. Add an input element to create a second option button for the ordertype field with the ID pickup, followed by a label associated with the pickup control containing the text Pickup. 8. Next within the form, create a field set with the ID deliveryinfo. Within this field set, add the following: a. A legend containing the text Delivery Options. b. A text area box with the ID addressbox and field name of delAddress containing the placeholder text enter delivery address. c. A label containing the text Delivery time (leave blank for earliest delivery) associated with the delBox control. d. Add an input element with the ID delbox and field name deltime for storing delivery time values. Use a data type of time for the control. 9. Next within the web form, create a field set with the ID pickupinfo containing the following information for pickup orders: a. A legend containing the text Pickup Options. b. A label containing the text Pickup time (leave blank for earliest pickup) associated with pickupBox control. c. Add an input element with the ID pickupbox and field name pickuptime for storing time values. Add the disabled attribute to the tag to disable this control when the form is initially opened. Use a data type of time for the control. 10. Finally, within the form, add a div element containing a submit button displaying the text begin building your Order. 11. Save your changes to the file and then go to the rb_validate.css file in your editor to add validation styles for the web form. 12. Within the Validation Styles section, add the following style rules: a. A rule that displays input, select, and textarea elements that have the focus with a background color of rgb(255, 255, 180). b. A rule that displays the nameBox and phoneBox controls that have the focus and contain valid data with a background color of rgb(220, 255, 220) and the background image file rb_okay.png at the right with no tiling contained within the background. c. A rule that displays the nameBox and phoneBox controls that have the focus and invalid data with a background color of rgb(255, 230, 230) and the background image file rb_warning.png at the right with no tiling contained within the background. 13. Save your changes to the style sheet and then open the rb_customer.html file in your browser. Verify the following: a. The content and the layout of the form resemble the form shown in Figure 7-59. b. If you submit the form by clicking the Begin Building your Own button with no customer name or phone number, the browser warns you of the missing values. c. As you enter text into the custName field, the input box background changes to show that the field value is valid. d. When you enter a phone number into the custPhone field, the input box provides inline validation to indicate whether a valid phone number has been entered. e. When you click the submit button for a successfully completed form, the browser displays the alert message that the form data passes the initial validation test. (Note: The script file used with this web page is written to enable only either the delivery option or the pickup option but not both.) Next, you will create a form that customers will use to build their customized pizzas. A preview of the form is shown in Figure 7-60. Figure 7-60 Red ball Pizza form to build a Pizza 14. Return to the rb_build.html file in your editor. Insert a link to the rb_forms2.css file and add a script element to link the file to the rb_formsubmit2.js file. 15. Scroll down to the section element, insert a form element below the paragraph element that employs the action at the fictional address http://www.example.com/redball/build using the post method. 16. Within the form element, add a div element containing a label with the text Quantity associated with the quantityBox control. Add a spinner control with the ID quantitybox and the field name pizzaQuantity. Have the value of the field range from 1 to 10 with a default value of 1. 17. Add a div element that displays images of the pizza sizes, containing the following: a. The inline image rb_sizes.png. b. The label Pizza size associated with the sizeBox control. c. A range slider with the ID sizebox and the field name pizzasize ranging from 10 to 16 in steps of 2 with a default value of 14. 18. Add a div element that provides the selection of pizza crusts containing the following: a. The label Pizza crust associated with the crustBox control. b. A selection list for the pizzacrust field with the ID crustbox and containing the following option values and text: thin, thick, stuffed, and Pan. 19. Add a div element containing a check box with the ID cheesebox for the doublecheese field followed by the label Double cheese associated with the cheeseBox control. Then, add a second check box with the ID saucebox for the doublesauce field followed by the label Double sauce also associated with that check box. 20. Customers can choose what to place on their pizzas. Create a field set containing the legend Meat toppings. Add the following content to the field set. a. A div element containing the label Location but not associated with any form control. Next to the label, place the inline images full.png, left.png, right.png, and none.png with the alternate text full, left, right, and none used to graphically indicate where the meat ingredients should be placed on the pizza (on the full pie, the left side, the right side, or nowhere). b. A div element containing the label Pepperoni and followed by four option buttons belonging to the pepperoni field and with the values full, left, right, and none. Make none checked by default. c. Repeat Step b to insert div elements with the values used in Step b but associated with the ham, pork, sausage, and chicken fields. 21. Using Figure 7-60 as your guide, repeat Step 20 to create a field set with the legend vegetable toppings, followed by div elements with the values used in Step 20 but associated with the mushrooms, peppers, onions, tomatoes, and jalapenos fields. 22. At the bottom of the form, add a div element containing a submit button with the text Add to your Order. 23. Save your changes to the file and then open rb_build.html in your browser. Verify that the content and layout of the form resemble that shown in Figure 7-60. Verify that all of the form controls work as expected, that is, you can only select one location for each ingredient option at a time.