Het HTML <form> element is een fundamenteel bouwblok voor het maken van interactieve formulieren op een webpagina. Het dient als een container voor alle formelementen. Laten we een voorbeeld van een basisformulier verkennen:

Opmerking

Alle voorbeelden bevatten het attribuut onsubmit="return false" om het standaardgedrag van het indienen van formulieren te voorkomen. Op deze manier blijft de focus liggen op het begrijpen van het maken van formulieren en attributen.

Uitleg van de form attributen:

• name biedt een unieke identificatie voor het formulier op een webpagina. Zowel de server als de client gebruiken deze identificatie om de formuliergegevens te verwerken. De formuliernaam mag cijfers, underscores, streepjes en Engelse alfabettekens bevatten, maar mag geen spaties bevatten;

• autocomplete bepaalt of webbrowsers automatisch formuliervelden kunnen invullen. Het kan worden ingesteld op "on" of "off" en toegepast op individuele formelementen;

• novalidate specificeert dat browsers geen formulier veldvalidatie moeten uitvoeren. Dit kan nuttig zijn wanneer je validatie handmatig wilt afhandelen met JavaScript;

• method specificeert de HTTP-methode die wordt gebruikt om de formuliergegevens naar de server te verzenden. De twee meest voorkomende methoden zijn GET en POST. Dit onderwerp wordt uitgebreid behandeld in de JavaScript-cursus.

Overzicht van Kind Elementen binnen een Formulier

Binnen het form element vind je verschillende kind elementen die essentieel zijn voor de functionaliteit van het formulier. Het input element stelt gebruikers in staat om verschillende datatypes in te voeren, zoals tekst, nummers en datums. In dit voorbeeld wordt type="email" gebruikt voor het e-mailveld en type="password" voor het wachtwoordveld. Het label element organiseert en structureert het formulier, biedt beschrijvende tekst voor invoervelden en helpt gebruikers hun doeleinden te begrijpen. Het knop element met type="submit" wordt gebruikt om de formuliergegevens naar de server te verzenden wanneer erop wordt geklikt. Standaard herlaadt het indienen van het formulier de webpagina, maar dit gedrag kan worden aangepast met JavaScript.