Formulieren

Formulieren zijn een belangrijk 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 zullen we echter geen gegevens naar een server verzenden, 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 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 het basisvoorbeeld van een formulier.