Formulieren

Formulieren zijn een essentieel hulpmiddel voor het verzamelen van gebruikersinvoer en het indienen ervan bij een server voor verwerking. Ze bestaan uit verschillende formelementen 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 bevatten het attribuut onsubmit="return false". Dit attribuut voorkomt standaard dat het formulier een verzoek naar de server verzendt.

Formulieren maken

Gebruik de <form>-tag om een interactief formulier te maken.

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

Formulierelementen

Formulieren bevatten labels en verschillende invoertypen (tekst, wachtwoord, e-mail, enzovoort). Labels koppelen tekst aan invoervelden en verbeteren de toegankelijkheid. Meer informatie over labels en invoertypen volgt in de volgende hoofdstukken.

<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>

Verzenden van een formulier

Een formulier wordt verzonden met een knop met type="submit".

<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 volgt een basisvoorbeeld van een formulier.