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
tag. If you use the
, 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
