Formulieren

Wat ga je leren?

Met <form>, <input> en <label> bouw je een formulier: de manier om tekst, getallen en keuzes van je bezoekers te vragen.

Theorie

Een formulier is een blok HTML waarmee gebruikers iets invullen. De drie belangrijkste onderdelen:

<form>
  <label for="naam">Naam:</label>
  <input type="text" id="naam">
  <button>Verstuur</button>
</form>

• <form> — het omhulsel rondom het hele formulier.
• <label> — het tekstlabel dat bij een invoerveld hoort. for koppelt het label aan het juiste id.
• <input> — het invoerveld zelf. De type bepaalt wat voor soort invoer (tekst, getal, email...).

Veelgebruikte input-types

type	Wat het doet
text	Gewone tekst
number	Alleen getallen
email	Een e-mailadres (browser controleert formaat)
password	Tekst, maar wordt verborgen als bolletjes
checkbox	Aan/uit-vinkje
radio	Eén keuze uit meerdere opties

Grotere tekstvelden en keuzelijsten

Naast <input> heb je twee speciale formulier-elementen:

• <textarea> — een meerregelig tekstvak (bijv. voor een opmerking of bericht). Geef rijen en kolommen op met rows en cols.
• <select> — een keuzelijst (dropdown) met meerdere <option>-keuzes.

<label for="bericht">Je bericht:</label>
<textarea id="bericht" rows="4" cols="40"></textarea>

<label for="land">Land:</label>
<select id="land">
  <option value="nl">Nederland</option>
  <option value="be">België</option>
  <option value="de">Duitsland</option>
</select>

Elke <option> heeft een zichtbare tekst (tussen de tags) en een value (de waarde die het formulier verstuurt).

Waarom heb je <label> nodig?

Een <label> is niet alleen mooi — hij is toegankelijk. Als je het label aanklikt, springt de cursor in het invoerveld. Screenreaders lezen het label voor zodra het veld actief wordt.

Predict

Wat denk je dat er gebeurt als je op het tekst-label "Naam:" klikt in het formulier hieronder?

Klik hier voor het antwoord

De cursor springt naar het naam-veld en je kunt direct beginnen typen. Dat komt door for="naam" op het label dat verwijst naar id="naam" op het invoerveld. Zonder die koppeling gebeurt er niks bij klikken op het label.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Typ een paar letters in het leeftijdveld. Wat gebeurt er?
   Antwoord

   In Chrome en Edge verschijnen de meeste letters niet. Het veld laat alleen cijfers toe en een paar tekens die in een getal kunnen staan, zoals een min-teken. Dat regelt type="number".
2. Typ onzin in het e-mailveld en klik op Verstuur. Zegt de browser er iets van?
   Antwoord

   In dit voorbeeld niet: het voorbeeldvenster mag geen formulieren versturen, en dan slaat de browser de controle ook over. Op een gewone webpagina krijg je een melding dat er een @ in het e-mailadres ontbreekt. Die controle komt van type="email".
3. Verander type="text" in type="password" bij het naamveld. Wat zie je tijdens het typen?
   Antwoord

   Elke letter verschijnt als een bolletje. Wat je typt staat er nog wel, maar iemand die meekijkt kan het niet lezen.
4. Voeg placeholder="bijv. Lisa" toe aan het naamveld. Wat zie je in het lege veld?
   Antwoord

   Lichtgrijze voorbeeldtekst: bijv. Lisa. Zodra je begint te typen verdwijnt hij; het is een hint, geen ingevulde waarde.

Editor laden...

Modify

Opdracht: Voeg een vinkje (checkbox) toe met de tekst "Ik ga akkoord met de voorwaarden".

Editor laden...

Tip

Gebruik <input type="checkbox" id="akkoord"> met daarnaast een <label for="akkoord">.

Antwoord

<input type="checkbox" id="akkoord">
<label for="akkoord">Ik ga akkoord met de voorwaarden</label>

Make

Opdracht: Bouw een aanmeldformulier voor een fictieve game-toernooi. Vraag minimaal om: spelernaam, e-mail, leeftijd, favoriete spel (tekst), en een checkbox of de speler ervaring heeft.

Editor laden...

Tip

Geef elk veld een eigen id en koppel een <label for="..."> aan elk veld. Sluit af met een knop "Inschrijven".

Antwoord

<form>
  <label for="speler">Spelernaam:</label>
  <input type="text" id="speler">

  <label for="email">E-mail:</label>
  <input type="email" id="email">

  <label for="leeftijd">Leeftijd:</label>
  <input type="number" id="leeftijd">

  <label for="spel">Favoriete spel:</label>
  <input type="text" id="spel">

  <input type="checkbox" id="ervaring">
  <label for="ervaring">Ik heb toernooi-ervaring</label>

  <button>Inschrijven</button>
</form>

Er gaat iets mis

<label> zonder for of <input> zonder id

<!-- Fout: geen koppeling -->
<label>Naam:</label>
<input type="text">

Het werkt visueel, maar klikken op het label doet niks en screenreaders kunnen het label niet aan het veld koppelen. Geef je <input> altijd een uniek id en je <label> een matchende for:

<label for="naam">Naam:</label>
<input type="text" id="naam">