Unit 6 - Forms Associated Web Pages Descriptions And HTML Code 1. oceaniaemploymentformbad.html - This application for employment commits several of the cardinal sins of poor form design. Filename: oceaniaemploymentformbad.html <--Begin Web Page Description--> Page Title: Oceania Employment Application - Poor example violating multiple guidelines Page Format: Red/blue text on a white background. Page Heading: Oceania Employment Application Items in red (the word "red" is displayed in red) are required. The form is laid out in a table format. Row 1, Column 1: First Name:(in red) Row 1, Column 2: Middle Initial:(in blue) Row 1, Column 3: Last Name:(in red) Row 2, Column 1: Text input box Row 2, Column 2: Text input box Row 2, Column 3: Text input box Row 3, Columns 1, 2: Social Security Number:(in red) Row 3, Column 3: Telephone Number:(in red) Row 4, Columns 1, 2: Text input box Text input box Text input box Row 4, Column 3: Text input box Row 5, Column 1: Street Address:(in red) Row 5, Column 2: Blank Row 5, Column 3: Blank Row 6, Columns 1, 2, 3: Text input box Row 7, Column 1: City:(in red) Row 7, Column 2: State:(in red) Row 7, Column 3: Zip:(in red) Row 8, Column 1: Text input box Row 8, Column 2: Text input box Row 8, Column 3: Text input box Row 9: Blank except for a horizontal rule Row 10, Column 1, 2: Position Sought:(in red) Row 10, Column 3: Experience?(in red) Row 11, Column 1, 2: Combination input box Options: Worker - $10 per hour, 40 hrs. per week Supervisor - $15 per hour, 35 hrs. per week Manager - $20 per hour, 30 hrs. per week Row 11, Column 3: Radio Button Yes Radio Button No Row 12, Column 1: Blank except for a horizontal rule Row 12, Column 2: Blank Row 12, Column 3: Blank Row 13, Column 1: LAST EMPLOYMENT Row 13, Column 2: Blank Row 13, Column 3: Blank Row 14, Column 1: Employer:(in red) Row 14, Column 2: Blank Row 14, Column 3: Blank Row 15, Column 1, 2, 3: Text input box Row 16, Column 1: Employer's Telephone Number:(in red) Row 16, Column 2: Supervisor:(in red) Row 16, Column 3 Row 17, Column 1: Text input box Row 17, Column 2: [NOTE: There is an error in the form example; there should be a text input box in this spot to correspond to "Supervisor:" although in the document, it's blank.] Row 17, Column 3 Row 18, Column 1: Position Held:(in red) Row 18, Column 2: Dates:(in red) Row 18, Column 3: Reason for Leaving:(in red) Row 19, Column 1: Text input box Row 19, Column 2: Text input box Row 19, Column 3: Textarea input box Row 20, Columns 1, 2, 3: Submit button Text link on the bottom of the page: "Back to Accessible Forms Table of Contents" <--End Page Description--> <--Begin HTML Code--> Oceania Employment Application

Oceania Employment Application

Items in red are required elements.

First Name: Middle
Initial:		 Last Name:
Social Security Number: Phone Number:
- -
Street Address:
City: State: Zip:
Position Sought: Experience?
Yes No
LAST EMPLOYMENT
Employer:
Employer's Telephone Number: Supervisor:
Position Held: Dates: Reason for Leaving:

Back to Accessible Forms Table of Contents

<--End HTML Code--> 2. oceaniaemploymentformgood.html - This application for employment corrects the problems with the "bad" form, using a table for layout. Filename: oceaniaemploymentformgood.html <--Begin Web Page Description--> Page Title: Oceania Employment Application - Better example, but using tables for layout Page Format: Blue text on a white background. Page Heading: Oceania Employment Application Items marked with an asterisk (*) are required. The form is laid out in an unruled table format of two columns, eleven rows. Table Caption: PERSONAL INFORMATION Row 1, Column 1: First Name*:(header) Row 1, Column 2: Text input box, associated with the previous label Row 2, Column 1: Middle Initial:(header) Row 2, Column 2: Text input box, associated with the previous label Row 3, Column 1: Last Name*:(header) Row 3, Column 2: Text input box, associated with the previous label Row 4, Column 1: Social Security Number*:(header) Row 4, Column 2: Text input box, associated with the previous label: "Type SSN without dashes" Row 5, Column 1: Street Address*:(header) Row 5, Column 2: Text input box, associated with the previous label: "Type in Street Address" Row 6, Column 1: City*:(header) Row 6, Column 2: Text input box, associated with the previous label Row 7, Column 1: State Abbreviation*:(header) Row 7, Column 2: Drop-down input box, options: NY, VT, CT, MA, PA (NY is the default Row 8, Column 1: Zip*:(header) Row 8, Column 2: Text input box, associated with the previous label: "Enter 5-digit zip" Row 9, Column 1: Telephone*: (header) Row 9, Column 2: Text input box, associated with the previous label: "Enter phone including area" Row 10, Column 1: Position Sought*: (header) Row 10, Column 2: Drop-down input box, options: Select a position from the list (default), Worker - $10 per hour, 40 hrs. per week, Supervisor - $15 per hour, 35 hrs. per week, Manager - $20 per hour, 30 hrs. per week Row 11, Column 1: Experience*?(header) Row 11, Column 2: Radio button, yes radio button, no (default) (end this table) Table Caption: WORK HISTORY Row 1, Column 1: Previous Employer*:(header) Row 1, Column 2: Text input box, associated with the previous label: "Enter the name of your previous employer" Row 2, Column 1: Employer's Telephone Number*:(header) Row 2, Column 2: Text input box, associated with the previous label: "Enter phone including area" Row 3, Column 1: Supervisor*:(header) Row 3, Column 2: Text input box, associated with the previous label: "Enter your supervisor's name" Row 4, Column 1: Position Held*:(header) Row 4, Column 2: Text input box, associated with the previous label: "Enter your last job" Row 5, Column 1: Dates Worked*:(header) Row 5, Column 2: Text input box, associated with the previous label: "From what date to what date" Row 5, Column 1: Dates Worked*:(header) Row 5, Column 2: Text input box, associated with the previous label: "From what date to what date" Row 6, Column 1: Reason for Leaving*:header) Row 6, Column 2: Textarea input box, associated with the previous label: "Why did you leave?" Row 7, Columns 1, 2: Submit button, label: "Submit Job Application" <--End Page Description--> <--Begin HTML Code--> Oceania Employment Application

Oceania Employment Application

Items marked with an asterisk (*) are required elements.

PERSONAL INFORMATION
Yes No

WORK HISTORY

<--End HTML Code--> 3. MSoceaniaemploymentformgood.html - This application for employment corrects the problems with the "bad" form, using cascading style sheets for layout. Filename: MSoceaniaemploymentformgood.html Page title: Oceania Employment Application - Best example, using style sheets to lay out form <--Begin Web Page Description--> The layout of the file is essentially the same as the previous table, except that it's done using style sheets instead of tables. Because it is essentially the same as the previous form, we will not describe the form's appearance. <--End Web Page Description--> <--Begin HTML Code--> Oceania Employment Application

Oceania Employment Application

Items marked with an asterisk (*) are required elements.

PERSONAL INFORMATION

Yes No

WORK HISTORY

<--End HTML Code-->