What email address or phone number would you like to use to sign in to Docs.com?
If you already have an account that you use with Office or other Microsoft services, enter it here.
Or sign in with:
Signing in allows you to download and like content, and it provides the authors analytical data about your interactions with their content.
Embed code for: CIS 363 DeVry Week 5 iLab 5
Select a size
CIS 363 DeVry Week 5 iLab 5
Downloading is very simple, you can download this Course here: http://mindsblow.us/question_des/CIS363DeVryWeek5iLab5/4600
Contact us at: email@example.com
Web Interface Design With Lab
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.
Downloading is very simple, you can download this Course here:
Contact us at:
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
Part A: Page layout and formatting using CSS
Part B: Form created with appropriate fields and buttons as specified
Part B: thanks.html page created and connected to the form action
Part C: Form validation completed as specified
Part C: thanks.html page loads when form is successfully submitted
Part C: User is notified and form is not submitted if validation fails
Lab Report – All sections complete
Part A: Create the Web Page
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
One kayak with rudder for $775.00
One 10 L dry bag for $15.00
Two helmets for $50.00 each
The total cost for the order
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
Set up a form on the page below the order summary information.
Include fields for the following information:
address (street, city, state/province, country);
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.
Include a Submit button to complete the order.
Create a simple HTML page with a Heading Level 1 that says “Thank You!” Save this as thanks.html.
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
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.
If the form does not validate, notify the user and do not allow the form to submit.
Part D: Complete the Lab Report
Download the CIS363_Lab_Report.docx file from Doc Sharing.
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.
Copy files from the Citrix server (if necessary).
Zip all of the files from Parts A–D into a single zip file.
Submit your zip file to the Dropbox.