Web Development HTML/CSS/JS

COM340 Course Project – Phase 2 – Registration Form Design

In this phase of the project, you are required to design a form that can be used to register on your

project website. Below are the requirements:

1. Create a link in the navigation bar called “Register” which will display a new page with the form.

The new page MUST have the same preamble (Logo, Company Info. Navigations, and stock

photo as the main page.)

2. Each odd row in the form should have a different background color and title/heading. The

columns of the even row have the contents.

3. The form should be conspicuously titled as “Registration Form”.

4. The <label> tag should be use for all form inputs.

5. Each form element must have a name and id.

6. The form Submit or Reset buttons must be button type and colored.

7. Set the form method and action attributes to empty for now.

8. Whenever necessary, use the maxlength attribute to specify the maximum number of allowed

characters.

9. Here are the contents

a. Full Name

i. Last name, First Name, and Middle Initial

b. Address

i. Street, City, State (populate with US states), and Country (populate with all of

the countries in the world)

c. Gender

i. Male or Female (Radio buttons)

d. Marital Status

i. Married, Divorced, Single, Widowed, Separated (Use datalist)

e. Date of Birth

i. Use date input type

f. Contact Phone Number

i. With country code (allow numeric values only up to 20)

g. Email Address

i. Use email address input type

h. Login ID

i. Only alphanumeric – minimum of 6 and maximum of 10

i. Password

i. Alphanumeric with any if these - @#$% - minimum of 6 and maximum of 12 –

password input type.

j. Provide 7 types of hobbies and allow the user to select his/her hobbies (use checkbox)