CIS 363 DeVry Week 5 iLab 5

Lab Steps
Part A: Create the Web Page
1. Using what you learned in Weeks 1 to 4, create a web page that includes the following:
A title for the online store—you make one up
A subtitle that says “Complete Your Order”
The items that the user ordered
o One kayak with rudder for $775.00
o One 10 L dry bag for $15.00
o Two helmets for $50.00 each
The total cost for the order
1. Use CSS to create a layout and add styles, color, and graphics to the page as you see fit.
Part B: Add an HTML Form to the Page
1. Set up a form on the page below the order summary information.
2. Include fields for the following information:
o name;
o address (street, city, state/province, country);
o phone number;
o e-mail address;
o preference for shipping or picking up the order;
o credit card type (one of Visa, MasterCard, or American Express); and
o credit card number.
Be sure to choose the appropriate form element to each input field. For example, a textbox should be used
for “name”. Also, use appropriate labels for each field so that the user knows what information is expected.
1. Include a Submit button to complete the order.
2. Create a simple HTML page with a Heading Level 1 that says “Thank You!” Save this as thanks.html.
3. For the purpose of this lab, set the form action to thanks.html. When a valid form is completed, the form will
redirect to this page (Note: If this page was part of a real store, we would set the form action to a server script
to handle the order.)
Part C: Add Validation to the HTML Form
1. Include validation to the form to ensure that
name and address are not blank;
one of the ship or pick-up options is selected;
a credit card type is selected; and
a credit card number is not blank.
1. If the form does not validate, notify the user and do not allow the form to submit.
Part D: Complete the Lab Report
1. Download the CIS363_Lab_Report.docx file from Doc Sharing.
2. The lab report must be completed for all labs. The key parts of the report include the following.
o Objectives: A one-paragraph explanation of the purpose of the lab.
o Results: Include a screenshot of the working website or page.