HTML Registration Form

Create a new HTML document that will use the

Please do the following: Below you see two images of a registration form called register.html. The first image shows the page before the user interacted with it. The second image shows the page after the user incorrectly interacted with it. The page does not look pretty.

a) A sample registration form in which the user has not filled in the required fields, but attempts to submit the form anyway by clicking Register: see image.

b) The server responds by indicating all the form fields with missing or invalid data. The user must correct the problems and resubmit the entire form repeatedly until all errors are corrected: see image.

The page was not reloaded in a traditional application. The page was locally updated by modifying the DOM and seeing that result immediately on the screen

Your job is to:

• Create the above form. Note the action and method attributes will be left blank. The submit button will not call the backend. This is a local application.
• Use JS to display the errors messages as described.
• Use HTML5 input attributes wherever possible, like the phone number input.
• Place random computer science books in the dropdown, including the one shown in the image.
• After a book has been selected display, below the section, in green, the name of the book as confirmation of their selection. The selection should display --- pick a book --- as the default.
• The submit button should not work when there are errors on the page. Prevent the submit button from processing the submit operation when an error exists. Instead, the submit button will use the alert() function to display the message "Please correct the errors on the page and submit again". Once the user corrects the errors then the submit button should work without error message.
• Make this webpage pretty using CSS and HTML. Please be creative.
• Do not make the page responsive. Assume the page fits on a fixed screen of 800 pixels wide.