Due: 1 Feb 2012, 11:59pm
AbstractUsing the new form validation features in HTML5, create an input validated order form for a company of your choice.
AssignmentIn 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 |
| 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
features_delicious features_awesome |
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 |
The form should POST to http://qxlp.net/cs337/examples/html/post.php. 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: http://validator.w3.org (HTML) and http://jigsaw.w3.org/css-validator/ (CSS). Be sure to, under "More Options", set the profile to "CSS level 3"---any CSS3 features that have been officially recommended are allowed.
NotesImportant: 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 SubmissionAs 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).