This a project that will make tables and forms in HTML

The pictures are taken from the webpage that run on Safari browser, so the buttons in your webpage would display different if you run it on Chrome or other browser. As long as you use button element, it would be fine. Please note that not all buttons are using button element, some of them are using input element with type=submit. Every form should have only 1 button as input element to submit the form. Every other buttons should be identified as button elements.

Tasks

There are total 2 parts for this lab. Please read the instructions and requirements carefully.

1. Create a HTML file with title is "Update Profile" and named it "UpdateProfile.html"

2. Apply the HTML tags to the web page so the web page will look like it does in the page above. Remember too that these tags should be semantically correct. Everything should be within the form element, except Back hyperlink.

• You can omit form action attribute and button type because we don't communicate with any server at this moment.
• Profile image:
  • Name it as profile_image.jpg or profile_image.png.
  • Place at the same folder with the html file.
  • Image element's src attribute must be relative path.
  • Additional Image attributes: width="200px" and alt="student submitted image, transcription available below"
• Identify correctly which field has value and which field has placeholder attribute.
• Identify correctly the input type instead of using "text" for all. For example, input type of PHONE NUMBER would be "tel"
• Reset button has to be functional which means it will reset to original form (like the picture) after clicked it.

3. Submit UpdateProfile.html and profile_image.jpg/png to Canvas

Part 2 - We will make HTML page that looks like the one below.

1. Create a HTML file with title is "Add Education" and named it "AddEducation.html"

2. Apply the HTML tags to the web page so the web page will look like it does in the page above. Remember too that these tags should be semantically correct. Everything should be within the form element, except Back hyperlink.

• You can omit form action attribute and button type because we don't communicate with any server at this moment.
• Identify correctly the input type instead of using "text" for all. For example, input type of "Start Date" would be "date".
• For GPA, the input type must be "number" and user has to be able to enter float value. For example 3.57 or 3.8.
• Reset button has to be functional which means it will reset to original form (like the picture) after clicked it.

3. Submit AddEducation.html to Canvas

Extra credits :

1. In UpdateProfile.html, the form validate the pattern of Phone number matching "###-###-####" with "#" is a number from 0-9. The form will display error message when user clicks Update button if the phone number pattern is not right. Example of a valid phone number: 626-777-5555.

Please notice that 6267775555 is not a valid phone number with the required pattern because it is missing - character.

The browser will display error message when users submit the wrong pattern (not valid) phone number like below:

2. In AddEducation.html, the Degree would allow users to choose the below options besides manually enter their degree

My Profile Image C Change picture Delete Name FULL_NAME Address CURRENT_ADDRESS PHONE NUMBER 6267775555 EMAIL email@calstatela.edu LINK 1 Edit Delete SOCIAL MEDIA LINK 2 Edit Delete Enter New Link Add New Link Reset Update Education Degree Education's degree Major Enter your maior Location City State Country Start Date DOMY End Date DOWY GPA Reset Add PHONE NUMBER pattern ###-##-#### Address CURRENT ADDRESS Match the requested format PHONE NUMBER aaaal Education Degree action's degree Associate degree Major Bachelor's degree Master's degree Location Doctoral degree Start Date DOMY End Date DOTYY GPA Reset Add My Profile Image C Change picture Delete Name FULL_NAME Address CURRENT_ADDRESS PHONE NUMBER 6267775555 EMAIL email@calstatela.edu LINK 1 Edit Delete SOCIAL MEDIA LINK 2 Edit Delete Enter New Link Add New Link Reset Update Education Degree Education's degree Major Enter your maior Location City State Country Start Date DOMY End Date DOWY GPA Reset Add PHONE NUMBER pattern ###-##-#### Address CURRENT ADDRESS Match the requested format PHONE NUMBER aaaal Education Degree action's degree Associate degree Major Bachelor's degree Master's degree Location Doctoral degree Start Date DOMY End Date DOTYY GPA Reset Add