Lab 5: Forms
This iLab supports the following TCOs.
TCO 6: Given a project, develop an online form that uses client-side form validation.
You have been asked to design and implement a checkout form. Imagine that a user has been navigating an online store that sells a variety of sports equipment. The user has added a number of items to his or her shopping cart and is going through the checkout process to order the items online. The checkout page shows what the user bought and allows him or her to enter his or her information (name, address, credit card number, etc.) to complete the order. You are going to design this checkout form.
Part A: Web page created with order summary information 4
Part A: Page layout and formatting using CSS 4
Part B: Form created with appropriate fields and buttons as specified 10
Part B: thanks.html page created and connected to the form action 4
Part C: Form validation completed as specified 6
Part C: thanks.html page loads when form is successfully submitted 3
Part C: User is notified and form is not submitted if validation fails 3
Lab Report – All sections complete 6
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
2. 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:
• address (street, city, state/province, country);
• phone number;
• e-mail address;
• preference for shipping or picking up the order;
• credit card type (one of Visa, MasterCard, or American Express); and
• 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.
3. Include a Submit button to complete the order.
4. Create a simple HTML page with a Heading Level 1 that says “Thank You!” Save this as thanks.html.
5. 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.
2. 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.
• Objectives: A one-paragraph explanation of the purpose of the lab.
• Results: Include a screenshot of the working website or page.
• Conclusions: A one-paragraph explanation of what you learned while completing the lab, any challenges you had to work through, and how you can use what you learned going forward.
1. Copy files from the Citrix server (if necessary).
2. Zip all of the files from Parts A–D into a single zip file.
3. Submit your zip file to the Dropbox.
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at firstname.lastname@example.org.
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at email@example.com and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at firstname.lastname@example.org.
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.