Assessment 2: Create a form with table layout

Assessment 2: Create a form with table layout (25 points)
Due: see course outline for a specific date
In assignment 1, you create a newsletter for a local restaurant called “Joan’s Tacos”. The owners liked
your work, and now they have a new project. They want you to create a customer feedback form. Their
designer team provide you with this design:
Figure 1
Header
section
Middle
Section
Footer
Section
Page 2 of 6
◼ Requirement (Client requirement)
1. You must use table css layout (Not the table tag) to code the feedback design. Creating your
html layout using <table tag does not count for this assignment, and your work will be considered as
an unacceptable work (Use display css property ‘display: table’ and other table elements such as
rows, cols and cells).
2. All items must be in the same order and have the same style as shown in figure 2.
3. First, last name, Email, and message are required fields.
4. All text fields must be validated. Use the pattern attribute and attach these regular expressions to
each filed:
a. First, last name: [a-zA-Z0-9]+
b. Email: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/
c. Telephone: \d{3}[\-]\d{3}[\-]\d{4}
d. Zip Code: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/
5. Apply access keys for each label using the first letter from each text field name. For example, for
Email, the access key should be the first letter ‘E’.
6. Users are only allowed to upload fills type of ‘.png’.
7. An active or focus text filed must sounder with a green border (Tip: use ‘: focus’). The focus style
should be: 1. border color is #0C0. 2. Border size is 1 px. 3. Border style /type is solid.
8. The default value for the ‘what was your order?’ point to Taco.
 9. The default value for the ‘How was your experience?’ point to Good.
 10. Bounce requirement (+3 point):
a. Change the ‘submit’ button when mouse goes over it. To do that, use ‘:hover’ and style the
background-color to #4CAF50 and font color to #fff.
b. Show pop up window with the message “Thanks for your feedback!”. Use the ‘OnClick’ events.
c. Use label elements to name all form elements. Use <label for=”” to create a label, then
attached it to a form element such as input or box list.
Page 3 of 6
◼ Design details:
Page 4 of 6
◼ Submit (Only submit a single .zip file)
1. Name your folder feedback_project.
2. Right-click on the folder and choose ‘Send to’ - ‘Compressed (zipped) folder’.
3. Upload the zipped folder to the Assignment 2 Dropbox
◼ Instructions (optional)
Besides the instructions steps from assignment 1 (refer to assignment 1 document). I would recommend
approaching this project using these steps:
1. First, think of how to fit all the design elements (e.g. checkbox) into table elements (e.g. tabelrow). You can draw a table over the provide design (I attached a full size of the design at the end
of this document). Draw the table header, rows, and cols and defined the sizes of the cols and
rows. Feel free to add notes such as display: table, display: table-row, display: table-cell…etc.
2. Now, define elements with similar style and group them under css selectors. Also, define which
cells need to be merged.
3. By now, you should be able to position contents on the layout. Create the content to fit its position
on the layout. In the case of table layout, the position can be a whole row, col or cell. I would
recommend using percentage values to set the width for cells, rows, and cols.
4. Apply all styles and keep fixing it until you get a similar result as required.
5. Finally, apply the nonessentials style such as access keys, default values, focus style for text
files...etc.
Page 5 of 6
Evaluation
This assessment is graded out of 20 points and will be evaluated using the following rubric.
Learners may receive partial scores or a zero for unacceptable work.
Marking Component Out of
Page layout is well structured and organized 3
The right font applied to all page 2
The right color for background and font applied 1
The code compiles with no errors 2
All page items are in the right position 3
Page style with an external style sheet. 1
Access keys are applied 4
Default values are applied 4
Required files are applied 4
Text fields are validated 4
Code comments are used and clear 2
Bounce mark Sum 30
Hover applied on the submit button +1
Pop up window applied +1
Label element applied to at least 3 elements +1
Sum 33
Total 30
Final 20/20
◼ Tips: tags and css properties you may need to use. Feel free to use any tag is not listed below:
Tags Attributes Value CSS CSS Values
- from
- input
- button
- hr
- select
- option
- optgroup
- textarea
- label
- type
- name
- checked
- value
- selected
- pleaceholder
- for
- id
- file
- accept
- required
- novalidate
- pattern
- title
- accesskey
- radio
- checkbox
- text
- button
- :focus
- :valid
- :invalid
- :required
- Display
- table
- table-row
- table-cell
To learn more about any tag, search W3C website.
https://www.w3schools.com/tags/
To learn more about any CSS property, search W3C website: