CSc 337 - Web Programming > Assignments > Assignment 4

General Information

Due: 1 Feb 2012, 11:59pm


Using the new form validation features in HTML5, create an input validated order form for a company of your choice.


In this assignment, we'll be building an HTML page, styling it with CSS, and using forms on that page, coupled with HTML5's form validation feature, to build a webpage where you are buying something (what you are ordering is up to you). Your HTML page must be named purchase.html, and your CSS must be named style.css.

Your page must have a title and header, and your page must have a presentable appearance (see Notes section). As in past assignments, your CSS must be in it's own file; it cannot be encapsulated in the HTML file.

The following is a 'list of deliverables (elements)', these are elements you are required to have in your form. This table is arranged in columns with their respective attributes (except description - these are just notes from us).

e.g. the first row would be written as the following HTML tag:

<input type="text" id="firstName" name="firstName" pattern="[A-Za-z]*" required />

(Input) Type ID and Name Pattern Required Description
text firstName [A-Za-z]* yes Customer's first name
email emailAddress n/a (auto) yes Customer's email
url cWebsite n/a yes Customer's company website
text phoneNum \([0-9]{3}\)[0-9]{3}\-[0-9]{4} yes Customer's Contact phone #
textarea address n/a yes Customer's address
text city [A-Za-z]* yes Customer's city
select/option state n/a yes Customer's State (must have at least Arizona, California, Washington, and Denial)
text zip [0-9]{5} yes
text username [A-Za-z]* yes
password password ^\w*(?=\w*\d)(?=\w*[a-z])(?=\w*[A-Z])\w*$ yes Requires at least one uppercase letter, one lowercase letter, and one number.
number numObjects 1-20 (increments of 1) yes
radio name = sizeObjects
id = sizeObjectsSmall
id = sizeObjectsMedium
id = sizeObjectsLarge
n/a yes Must have at least small, medium, and large.
checkbox features_spicy
n/a no Must have at least three features: Spicy, Delicious, Awesome. May add more.
date dateArrival n/a yes
textarea spcInstruc n/a no
submit submitButton n/a n/a
Additional Requirements:

The form should POST to You can use this to check that your form is operating correctly since the server should output your submitted form data.

The label tag should be used on all form fields on this assignment and in the future.

Your homework must be valid according to W3C standards. Validation will be done through the following sites: (HTML) and (CSS). Be sure to, under "More Options", set the profile to "CSS level 3"---any CSS3 features that have been officially recommended are allowed.


Important: you must include a valid name and id attribute on each of your form elements as specified in the table for grading purposes or you will lose points.

When we say 'presentable appearance' we mean something that is easily understandable for us. Much like legibility on a written homework, if it's not easily decipherable by us, points will be taken away. It doesn't need to be a dazzling production website, but we do expect your styles to be user friendly and neat.

For styling, we recommend reading the "FORM(s) and Function" part of this article.

Homework Submission

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework4 for it to be graded and your files named as described (purchase.html and style.css).