Computer Concept IIIII

January 15, 2014

[CIS 121 Winter 2014 Lab 2: Introduction to form validation using html 5]

Lab 2

Due date 1/22/2014

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like. We are going to use HTML 5 to validate a simple data entry Form.

Goal

· Create a From with HTML 5 validation

· Format and Style the form with CSS3

Tasks

1- Download Lab2.zip into your desktop

2- Extract to a folder: You will see 2 files

a. Lab 2.docx

b. Index.html

c. Form.css

3- Open index.html using notepad++

4- Click Run in Firefox or Chrome to test it

5- The form look like figure one below should appear in your browser

6- Your task is modify the code in index.html and add the following changes

7- You need to add the following items into the right section

a. License Details section

i. Rename Website to Company Website

ii. Add a scroll bar for Number of licenses

b. In Billing details section

i. Change Name text box to First Name

ii. Add new text box Last Name

c. Payments Details

i. Add Credit Card type checkboxes

ii. Add to Payment Details field set

1. A new field set that will have all 3 types of credit card to choose from as an ordered or ordered list

Figure 1

What to submit: modified index.html and a snapshot of it from the browser as a zip file