Formulieren

Formulieren zijn een belangrijk hulpmiddel voor het verzamelen van gebruikersinvoer en het indienen ervan bij een server voor verwerking. Ze bestaan uit verschillende formulierelementen waarmee gebruikers gegevens kunnen invoeren. In deze cursus wordt echter geen data naar een server verzonden, omdat dit extra kennis vereist die buiten de scope van deze cursus valt.

Alle voorbeelden in de code hebben het attribuut onsubmit="return false". Dit attribuut voorkomt standaard dat het formulier een verzoek naar de server verzendt.

Formulieren aanmaken

De <form>-tag wordt gebruikt om een interactief formulier op een webpagina te maken. Het bevat verschillende formulierelementen voor gebruikersinvoer.
Voorbeeld:

<form>
  <!-- Form elements go here -->
</form>

Formulierelementen

HTML biedt verschillende invoertypen om gebruikersinvoer te verzamelen. Elk type heeft specifieke attributen en gedrag. Ook kan voor elk invoerveld een label worden opgegeven. Labels worden gebruikt om tekst te koppelen aan formulierelementen, wat zorgt voor een toegankelijkere en gebruiksvriendelijkere ervaring. Labels en invoervelden worden uitgebreid besproken in de volgende hoofdstukken.
Voorbeeld:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

Formulier verzenden

Het verzenden van een formulier wordt geactiveerd door een verzendknop (<button type="submit">), waarmee de formuliergegevens naar de server kunnen worden gestuurd voor verwerking.
Voorbeeld:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

Hier is het basisvoorbeeld van een formulier.

Videotutorial