ICT580-Assignment2 -Create a form using a table layout 

Description

  Assessment 2

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:

Page  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:
   1. First, last name: [a-zA-Z0-9]+
   2. Email: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/
   3. Telephone: \d{3}[\-]\d{3}[\-]\d{4}
   4. 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: 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):
    1. 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
11. 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.

Design details:

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

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.

◼ Tips: tags and CSS properties you may need to use. Feel free to use any tag is not listed below: