Assignment

Create an HTML document and a CSS stylesheet to display a Hogwarts registration form below:

When the user clicks on the Submit button, form data must be sent to Webhook.site in a POST request.

Note that the CSS stylesheet requires the :has() pseudo-class that is available only in recent browsers.

You should use the Henny Penny font for displaying the heading.

You should use the EB Garamond font for displaying running text.

Additional tasks

  1. Modify the form such that choosing a house should change the background color of the page to the primary color of the house. The primary colors of the houses are taken from here:

  2. Add a form control to enter the number of wands, i.e., a non-negative integer (<input type="number">).

  3. Add a form control to upload a photo in PNG or JPEG format (<input type="file">).

  4. Add the question Would you like to visit the Ministry of Magic? to the form, for which the options Yes and No must be chosen with radio buttons (<input type="radio">).

  5. Modify the form such that the house must be chosen using a group of radio buttons (<input type="radio">). The options must be shown on top of each other.

  6. Add a password field (<input type="password">) to the form. Use the pattern attribute to express the following requirements:

  7. Add a checkbox to the form with the following label: I let the Sorting Hat choose a house for me. When the checkbox is checked, the form control for choosing the house must become disabled. Note that this requires JavaScript; see the disabled property.

  8. Add another password field to the form to re-enter the password. The two passwords entered must match to submit the form. Note that this requires the use of JavaScript.

  9. If the age calculated from the date of birth entered is less than 11 years, then clicking on the Submit button must result in an error with the following message: You are too young for Hogwarts, the lower age limit is 11 years. Note that this requires the use of JavaScript.