Assessment 2: Create a form using a table layout

Assessment 2: Create a form using a table layout (25 points)

In assignment 1, you created 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, and
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 the table CSS layout; not the <table tag. If you use the <table, your work will be
considered as an unacceptable work, and you will be graded with zero.
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 have a green border (Tip: use ‘: focus’). The focus style should be
as follows: 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?’ is Taco.
9. The default value for the ‘How was your experience?’ is Good.
10. Bounce requirements (+1 point):
a. Change the ‘submit’ button background color when the mouse goes over it. To do that, use
‘:hover’ class and set it background-color to #4CAF50 and font color to #fff.
b. 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)
With using 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. tablerow, col…etc.). You can draw a table over the provide design (I attached 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.
2. Second, 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 the table layout, the position can be a whole row 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 the required design.
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 25 points and will be evaluated using the following rubric.
Learners may receive partial scores or zero for unacceptable work.
Complete % of the requirements
Marking Component At least
30%
At least
60%
At least
90%
Score
Page layout is structured and organized 1 2 3
The right font applied to all the page 0.5 1 2
The right color for background and font applied 0.5 1 2
The code compiles with no errors 1 2 3
All page items are in the right position 1 2 3
Page styled with an external style sheet. 0.5 1 2
Access keys are applied 0.5 1 2
Default values are applied 0.5 1 2
Required fields are applied 0.5 1 2
Text fields are validated 0.5 1 2
Code comments are used and clear 0.5 1 2
Final /25
◼ 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:
https://www.w3schools.com/cssref/
Page 6 of 6