## Taak
Een HTML-formulier maken om gebruikersinformatie te verzamelen met behulp van invoervelden en bijbehorende labels.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlBlcnNvbmFsIEluZm9ybWF0aW9uIEZvcm08L3RpdGxlPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPlVzZXIgSW5mb3JtYXRpb24gRm9ybTwvaDI+CgogICAgPCEtLSBTdGVwIDE6IFByb3ZpZGUgY29ycmVjdCBgaW5wdXRgIHR5cGVzIGZvciBlYWNoIGNhc2UuIC0tPgoKICAgIDwhLS0gCiAgICAgIFN0ZXAgMjogRW5zdXJlIHRoYXQgZWFjaCBpbnB1dCBmaWVsZCBoYXMgYSB1bmlxdWUgYGlkYCBhdHRyaWJ1dGUKICAgICAgYW5kIGVhY2ggYDxsYWJlbD5gIGVsZW1lbnQgaGFzIGEgYGZvcmAgYXR0cmlidXRlCiAgICAgIHRoYXQgbWF0Y2hlcyB0aGUgYGlkYCBvZiBpdHMgYXNzb2NpYXRlZCBpbnB1dCBmaWVsZC4KICAgICAtLT4KICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICA8bGFiZWwgZm9yPSJuYW1lLWZpZWxkIj5OYW1lOjwvbGFiZWw+CiAgICAgIDwhLS0gQWRkIGEgdGV4dCBpbnB1dCAtLT4KICAgICAgPGlucHV0IHR5cGU9Il9fX19fIiBpZD0ibmFtZS1maWVsZCIgcmVxdWlyZWQgbmFtZT0ibmFtZSIgLz48YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImVtYWlsLWZpZWxkIj5FbWFpbDo8L2xhYmVsPgogICAgICA8IS0tIEFkZCBhbiBlbWFpbCBpbnB1dCAtLT4KICAgICAgPGlucHV0IHR5cGU9Il9fX19fIiBpZD0iX19fX18iIHJlcXVpcmVkIG5hbWU9ImVtYWlsIiAvPjxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iX19fX18iPl9fX19fOjwvbGFiZWw+CiAgICAgIDwhLS0gQWRkIGEgcGFzc3dvcmQgaW5wdXQgLS0+CiAgICAgIDxpbnB1dCB0eXBlPSJfX19fXyIgaWQ9InBhc3N3b3JkLWZpZWxkIiByZXF1aXJlZCBuYW1lPSJwYXNzd29yZCIgLz48YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImJpcnRoZGF0ZS1maWVsZCI+QmlydGggZGF0ZTo8L2xhYmVsPgogICAgICA8IS0tIEFkZCBhIGRhdGUgaW5wdXQgLS0+CiAgICAgIDxpbnB1dCB0eXBlPSJfX19fXyIgaWQ9ImJpcnRoZGF0ZS1maWVsZCIgcmVxdWlyZWQgbmFtZT0iYmlydGhkYXRlIiAvPjxiciAvPgoKICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQgZm9ybTwvYnV0dG9uPgogICAgPC9mb3JtPgoKICAgIDwhLS0gVGhlIHNjcmlwdCBpcyBhZGRlZCBvbmx5IGZvciBkZW1vbnN0cmF0aW9uIHB1cnBvc2VzIC0tPgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Y29uc3QgZm9ybSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImZvcm0iKTsKCmZvcm0uYWRkRXZlbnRMaXN0ZW5lcigic3VibWl0IiwgKGV2ZW50KSA9PiB7CiAgZXZlbnQucHJldmVudERlZmF1bHQoKTsKCiAgLy8gQWNjZXNzaW5nIGZvcm0gaW5wdXQgdmFsdWVzCiAgY29uc3QgbmFtZUlucHV0ID0gZm9ybS5lbGVtZW50c1sibmFtZSJdLnZhbHVlOwogIGNvbnN0IGVtYWlsSW5wdXQgPSBmb3JtLmVsZW1lbnRzWyJlbWFpbCJdLnZhbHVlOwogIGNvbnN0IHBhc3N3b3JkSW5wdXQgPSBmb3JtLmVsZW1lbnRzWyJwYXNzd29yZCJdLnZhbHVlOwogIGNvbnN0IGJpcnRoZGF5SW5wdXQgPSBmb3JtLmVsZW1lbnRzWyJiaXJ0aGRhdGUiXS52YWx1ZTsKCiAgLy8gRGlzcGxheWluZyBmb3JtIGlucHV0IHZhbHVlcyBpbiBhbiBhbGVydAogIGFsZXJ0KAogICAgIk5hbWU6ICIgKwogICAgICBuYW1lSW5wdXQgKwogICAgICAiXG5FbWFpbDogIiArCiAgICAgIGVtYWlsSW5wdXQgKwogICAgICAiXG5QYXNzd29yZDogIiArCiAgICAgIHBhc3N3b3JkSW5wdXQgKwogICAgICAiXG5CaXJ0aGRheTogIiArCiAgICAgIGJpcnRoZGF5SW5wdXQKICApOwoKICAvLyBDbGVhcmluZyBmb3JtIGZpZWxkcwogIGZvcm0ucmVzZXQoKTsKfSk7

## Hint
- Stap 1: Voorzie elk invoerveld van de juiste attributen volgens deze instructies:
     - Gebruik het attribuut `type="text"` voor het naamveld;
     - Gebruik het attribuut `type="email"` voor het e-mailveld;
     - Gebruik het attribuut `type="password"` voor het wachtwoordveld;
     - Gebruik het attribuut `type="date"` voor het geboortedatumveld.
- Stap 2: Zorg ervoor dat elk invoerveld correct is gekoppeld aan het bijbehorende label volgens deze instructies:
   - Voor het invoerveld met `id="name-field"` moet het bijbehorende label `for="name-field"` hebben;
   - Voor het invoerveld met `id="email-field"` moet het bijbehorende label `for="email-field"` hebben;
   - Voor het invoerveld met `id="password-field"` moet het bijbehorende label `for="password-field"` hebben;
   - Voor het invoerveld met `id="birthdate-field"` moet het bijbehorende label `for="birthdate-field"` hebben.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPlBlcnNvbmFsIEluZm9ybWF0aW9uIEZvcm08L3RpdGxlPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPlVzZXIgSW5mb3JtYXRpb24gRm9ybTwvaDI+CgogICAgPCEtLSBTdGVwIDE6IFByb3ZpZGUgY29ycmVjdCBgaW5wdXRgIHR5cGVzIGZvciBlYWNoIGNhc2UuIC0tPgoKICAgIDwhLS0gCiAgICAgIFN0ZXAgMjogRW5zdXJlIHRoYXQgZWFjaCBpbnB1dCBmaWVsZCBoYXMgYSB1bmlxdWUgYGlkYCBhdHRyaWJ1dGUKICAgICAgYW5kIGVhY2ggYDxsYWJlbD5gIGVsZW1lbnQgaGFzIGEgYGZvcmAgYXR0cmlidXRlCiAgICAgIHRoYXQgbWF0Y2hlcyB0aGUgYGlkYCBvZiBpdHMgYXNzb2NpYXRlZCBpbnB1dCBmaWVsZC4KICAgICAtLT4KICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICA8bGFiZWwgZm9yPSJuYW1lLWZpZWxkIj5OYW1lOjwvbGFiZWw+CiAgICAgIDwhLS0gQWRkIGEgdGV4dCBpbnB1dCAtLT4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lLWZpZWxkIiByZXF1aXJlZCBuYW1lPSJuYW1lIiAvPjxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iZW1haWwtZmllbGQiPkVtYWlsOjwvbGFiZWw+CiAgICAgIDwhLS0gQWRkIGFuIGVtYWlsIGlucHV0IC0tPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbC1maWVsZCIgcmVxdWlyZWQgbmFtZT0iZW1haWwiIC8+PGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJwYXNzd29yZC1maWVsZCI+UGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPCEtLSBBZGQgYSBwYXNzd29yZCBpbnB1dCAtLT4KICAgICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQtZmllbGQiIHJlcXVpcmVkIG5hbWU9InBhc3N3b3JkIiAvPjxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iYmlydGhkYXRlLWZpZWxkIj5CaXJ0aCBkYXRlOjwvbGFiZWw+CiAgICAgIDwhLS0gQWRkIGEgZGF0ZSBpbnB1dCAtLT4KICAgICAgPGlucHV0IHR5cGU9ImRhdGUiIGlkPSJiaXJ0aGRhdGUtZmllbGQiIHJlcXVpcmVkIG5hbWU9ImJpcnRoZGF0ZSIgLz48YnIgLz4KCiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0Ij5TZW5kIGZvcm08L2J1dHRvbj4KICAgIDwvZm9ybT4KCiAgICA8IS0tIFRoZSBzY3JpcHQgaXMgYWRkZWQgb25seSBmb3IgZGVtb25zdHJhdGlvbiBwdXJwb3NlcyAtLT4KICAgIDxzY3JpcHQgc3JjPSJpbmRleC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Beheers de basisprincipes van HTML om goed gestructureerde en toegankelijke webinhoud te creëren. Leer hoe u documenten structureert met behulp van tags, elementen en attributen. Werk zelfverzekerd met tekst, lijsten, afbeeldingen, audio en video om webpagina's te verrijken. Maak tabellen voor georganiseerde gegevens en formulieren voor gebruikersinvoer en interactie. Ontdek semantische HTML om de toegankelijkheid te verbeteren en volledige, functionele websitestructuren vanaf de basis op te bouwen.

Maak kennis met het web en HTML, inclusief het belang van tags, elementen en attributen. Ontdek de basisstructuur van een HTML-document en een korte geschiedenis van het web.

Beheers de basisprincipes van HTML-markup, met nadruk op speciale tekstopmaak en lijsten, en begrijp het belang hiervan bij het structureren van inhoud binnen een HTML-document. Verdiep je in de details van de HTML-documentstructuur en verfijn technieken voor tekstopmaak.

Ontgrendel de kracht van visuele en auditieve inhoud in webontwikkeling door het naadloos integreren van afbeeldingen-, video- en audio-elementen in HTML-documenten. Verken de nuances van het opnemen van verschillende mediaformaten.

Verken de complexiteit van gegevenspresentatie en gebruikersinteractie met een volledige behandeling van tabellen en formulieren in HTML, inclusief tabelstructuren, formulieraanmaak en invoerelementen. Verwerf vaardigheid in het implementeren van formulierinvoerelementen en het benutten van attributen voor verbeterde functionaliteit.

Verhoog uw HTML-vaardigheden door u te verdiepen in semantische HTML-elementen, waarmee u gestructureerde en toegankelijke webinhoud kunt creëren. Begin met het bouwen van uw eerste website en pas uw nieuwe kennis toe om uw ideeën te realiseren.

Uitdaging: Toepassen van Formulierinvoervelden en Labels

Taak

Hint

Awesome!

Uitdaging: Toepassen van Formulierinvoervelden en Labels

Taak

Hint