Formulieren zijn de manier waarop gebruikers gegevens naar een server sturen: inloggen, registreren, een bestelling plaatsen. In de Symfony-track leer je hoe de server die gegevens verwerkt — maar eerst moet je de HTML-kant begrijpen.
1
De <form>-tag
Wat betekent dit?
<form> is de container voor alle formulierelementen. Het heeft twee belangrijke attributen:
action — het adres (URL) waar de gegevens naartoe worden gestuurd.
method — hoe ze worden gestuurd: get (gegevens zichtbaar in de URL) of post (gegevens onzichtbaar, voor wachtwoorden en gevoelige data).
<form action="/verstuur" method="post">
<!-- Hier komen de velden -->
<button type="submit">Versturen</button>
</form>
💡 GET vs POST: gebruik method="get" voor zoekopdrachten (de zoekterm in de URL is handig om te delen). Gebruik method="post" voor alles met wachtwoorden of persoonlijke gegevens.
2
Tekstvelden: <input> en <label>
Wat betekent dit?
<input> is een zelf-sluitende tag voor een invoerveld. Het type-attribuut bepaalt het soort veld. Het name-attribuut is de naam waarmee de server het veld herkent — dit is verplicht als je de waarde wil ontvangen.
<label for="id"> koppelt een tekstetiket aan een veld. Klik je op de label, dan springt de cursor naar het veld. Altijd gebruiken voor toegankelijkheid.
<label for="naam">Jouw naam:</label>
<input type="text" id="naam" name="naam" placeholder="bijv. Sara">
<label for="email">E-mailadres:</label>
<input type="email" id="email" name="email" required>
<label for="leeftijd">Leeftijd:</label>
<input type="number" id="leeftijd" name="leeftijd" min="1" max="120">Wat betekent dit?
placeholder — grijze hint-tekst die verdwijnt zodra de gebruiker begint te typen.
Wat betekent dit?
required — het formulier kan niet verzonden worden als dit veld leeg is. De browser toont automatisch een foutmelding.
3 Meer input-types
Het type-attribuut bepaalt hoe het veld eruit ziet én hoe de browser het valideert. Op mobiel toont de browser ook een aangepast toetsenbord.
<!-- Wachtwoordveld: tekens verborgen -->
<input type="password" name="wachtwoord">
<!-- Checkbox: aan/uit -->
<input type="checkbox" id="akkoord" name="akkoord">
<label for="akkoord">Ik ga akkoord met de voorwaarden</label>
<!-- Radio buttons: één keuze uit meerdere -->
<input type="radio" id="man" name="geslacht" value="man">
<label for="man">Man</label>
<input type="radio" id="vrouw" name="geslacht" value="vrouw">
<label for="vrouw">Vrouw</label>
<!-- Datum -->
<input type="date" name="geboortedatum">
<!-- Verborgen waarde (voor de server, niet zichtbaar) -->
<input type="hidden" name="token" value="abc123">
💡 Radio buttons: geef alle opties in een groep dezelfde name. Dan weet de browser dat de gebruiker er maar één kan kiezen. Het value-attribuut is wat de server ontvangt als die optie is geselecteerd.
4 Meerdere regels en keuzelijsten
Wat betekent dit?
<textarea> is een invoerveld voor meerdere regels tekst. Gebruik het voor berichten of beschrijvingen. Het heeft een openings- en sluitingstag.
<label for="bericht">Bericht:</label>
<textarea id="bericht" name="bericht"
rows="4" cols="40"
placeholder="Typ hier...">
</textarea>Wat betekent dit?
<select> toont een uitklapmenu. Elke optie staat in een <option>-tag. Het value-attribuut is wat de server ontvangt.
<label for="vak">Vak:</label>
<select id="vak" name="vak">
<option value="">Kies...</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>5 Oefening 1: Inlogformulier
Opdracht:
Maak een inlogformulier. Het formulier moet een e-mailveld, een wachtwoordveld en een submit-knop bevatten. Koppel elke input aan een label.
✓ <form> met method="post"
✓ <input type="email"> met bijbehorende <label>
✓ <input type="password"> met bijbehorende <label>
✓ <button type="submit">
6 Oefening 2: Contactformulier
Opdracht:
Maak een contactformulier met een naamveld, e-mailveld, een <select> voor onderwerp en een <textarea> voor het bericht.
✓ <input type="text"> voor naam
✓ <input type="email"> voor e-mail
✓ <select> met minstens 2 <option>s
✓ <textarea> voor bericht
7 Eindopdracht: Registratieformulier
Maak een volledig registratieformulier:
✓ Naam (type="text", required)
✓ E-mail (type="email", required)
✓ Wachtwoord (type="password", required)
✓ Geboortedatum (type="date")
✓ Minstens 2 radio buttons (bijv. niveau: beginner / gevorderd)
✓ Checkbox "Ik ga akkoord" (required)
✓ Submit-knop
✓ Elk veld heeft een <label>
Uitstekend! Je beheerst HTML-formulieren.
In les 5 leer je semantische HTML — hoe je je pagina logisch structureert voor browsers en zoekmachines.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Registreren</title>
</head>
<body>
<h1>Nieuw account aanmaken</h1>
<form action="/registreer" method="post">
<label for="naam">Naam:</label><br>
<input type="text" id="naam" name="naam" required placeholder="Jouw naam"><br><br>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="ww">Wachtwoord:</label><br>
<input type="password" id="ww" name="wachtwoord" required><br><br>
<label for="geb">Geboortedatum:</label><br>
<input type="date" id="geb" name="geboortedatum"><br><br>
<p>Niveau:</p>
<input type="radio" id="beg" name="niveau" value="beginner">
<label for="beg">Beginner</label>
<input type="radio" id="gev" name="niveau" value="gevorderd">
<label for="gev">Gevorderd</label><br><br>
<input type="checkbox" id="akkoord" name="akkoord" required>
<label for="akkoord">Ik ga akkoord met de voorwaarden</label><br><br>
<button type="submit">Registreren</button>
</form>
</body>
</html>