Assessment 2: Create a form using a table layout Solution

$25.00 $22.00

Description

Due: see the course outline for a specific date

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:

Header

section

Middle

Section

Footer Section

Figure 1

Page 1 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.

    1. All items must be in the same order and have the same style as shown in figure 2.

    1. First, last name, Email, and message are required fields.

    1. 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]+

        1. Email: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/

        1. Telephone: \d{3}[\-]\d{3}[\-]\d{4}

        1. Zip Code: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/

    1. 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’.

    1. Users are only allowed to upload fills type of ‘.png’.

    1. 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.

    1. The default value for the ‘what was your order?’ is Taco.

      1. The default value for the ‘How was your experience?’ is Good.

      1. 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.

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 2 of 6

Design details:

Page 3 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. table-row, 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.

  1. Second, define elements with similar style and group them under CSS selectors. Also, define which cells need to be merged.

  1. 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.

  1. Apply all styles and keep fixing it until you get a similar result as the required design.

  1. Finally, apply the nonessentials style such as access keys, default values, focus style for text files…etc.

Page 4 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

At least

At least

Score

30%

60%

90%

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

type

– radio

– :focus

– table

input

name

– checkbox

– :valid

– table-row

button

checked

– text

– :invalid

– table-cell

hr

value

– button

– :required

select

selected

– Display

option

pleaceholder

optgroup

for

textarea

id

label

file

accept

required

novalidate

pattern

title

accesskey

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 5 of 6

Page 6 of 6