# Feladat

Készíts egy HTML dokumentumot és egy CSS stíluslapot az alábbi roxforti regisztrációs űrlap megjelenítéséhez:

![](hogwarts-form_hu1.png)

![](hogwarts-form_hu2.png)

A *Küldés* gombra való kattintáskor az űrlap adatokat a [Webhook.site](https://webhook.site/) webhelyre kell küldeni egy `POST` kérésben.

A CSS stíluslaphoz szükséges a [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pszeudo-osztály, mely csak újabb böngészőkben áll rendelkezésre.

A címsor megjelenítéséhez használd a [Henny Penny](https://fonts.google.com/specimen/Henny+Penny) betűtípust.

Folyószöveg megjelenítéséhez használd az [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) betűtípust.

## További teendők

1. Módosítsd úgy az űrlapot, hogy a ház kiválasztásakor az oldal háttérszíne változzon a ház elsődleges színére. A házak elsődleges színei [innen](https://www.wizardingworld.com/writing-by-jk-rowling/colours) véve:

    * Griffendél: piros,
    * Hugrabug: sárga,
    * Hollóhát: kék,
    * Mardekár: zöld.

1. Adj hozzá az űrlaphoz egy vezérlőt a varázspálcák számának megadásához, mely egy nemnegatív egész szám ([`<input type="number">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)).

1. Adj hozzá az űrlaphoz egy vezérlőt egy PNG vagy JPEG formátumú fotó feltöltéséhez ([`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)).

1. Add hozzá az űrlaphoz a *Meg akarod-e látogatni a Mágiaügyi Minisztériumot?* kérdést, melyre az *Igen* és *Nem* válaszlehetőségek közüli választás rádiógombokkal történjen ([`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)).

1. Alakítsd át az űrlapot úgy, hogy a ház kiválasztása történjen rádiógombok egy csoportjának segítségével ([`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)). A válaszlehetőségek egymás alatt jelenjenek meg.

1. Adj hozzá az űrlaphoz egy jelszó mezőt ([`<input type="password">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)). A `pattern` attribútum segítségével fejezd ki az alábbi jelszó követelményeket:

   * A jelszó legalább hat karaktert kell, hogy tartalmazzon.
   * Kizárólag az angol ábécé betűi és a decimális számjegy karakterek megengedettek.
   * A jelszó betű és számjegy karaktert is kell, hogy tartalmazzon.

1. Helyezz el egy jelölőnégyzetet az űrlapon a ház választása elé a következő címkével: *A Teszlek Süvegre bízom a ház választását*. A jelölőnégyzet bekattintásakor kerüljön letiltásra a ház kiválasztására szolgáló vezérlő. Ehhez JavaScript használata szükséges, lásd a [`disabled`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled) tulajdonságot.

1. Adj hozzá az űrlaphoz egy további jelszómezőt a jelszó megismétléséhez. Ahhoz, hogy az űrlap elküldhető legyen, a két jelszónak meg kell egyezni. Ehhez JavaScript használata szükséges.

1. Ha a születési dátum szerint az életkor 11 év alatti, akkor a *Küldés* gombra való kattintás eredményezzen hibát a következő üzenettel: *Túl fiatal vagy még Roxforthoz, az alsó korhatár 11 év*. Ehhez JavaScript használata szükséges.

## Ajánlott olvasvány

* [Client-side form validation (MDN)](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
* [The Modern JavaScript Tutorial -- Date and time](https://javascript.info/date)