Formulieren: input, label en button
Bouw toegankelijke HTML-formulieren met gelabelde inputs, verschillende inputtypen, textareas, selects en verzendknoppen.
Formulieren: input, label en button is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Waarom HTML-formulieren?
Formulieren zijn de belangrijkste manier waarop gebruikers gegevens naar een server sturen: aanmelden, zoeken, afrekenen en terugkoppeling geven. Browsers bieden veel ingebouwd gedrag — validatie, toetsenbordinvoer en mobiele toetsenborden — dat je gratis krijgt door native formulierelementen te gebruiken.
Het <form>-element
Het <form>-element omvat alle gerelateerde besturingselementen. Het action-attribuut stelt de URL in die de gegevens ontvangt; method stelt GET of POST in. Bij SPA's voorkom je vaak de standaardverzending en handel je deze af met JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Tekst- en e-mailvelden
Het <input>-element is het werkpaard van formulieren. Het type-attribuut verandert het gedrag ervan. Gebruik type="text" voor vrije tekst en type="email" voor e-mailadressen (dit controleert de indeling en toont het juiste mobiele toetsenbord).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Wachtwoord, getal en andere typen
Andere nuttige invoertypen zijn: password (verbergt tekens), number (controleert getallen en toont draaiknoppen), date (toont een datumkiezer), range (schuifregelaar), checkbox (booleaanse schakelaar) en radio (keuze uit meerdere opties).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">Het <label>-element — essentieel voor toegankelijkheid
Elk invoerveld moet een bijbehorend <label> hebben. Het label vertelt gebruikers en schermlezers waarvoor het veld dient. Als je op het label klikt, krijgt het invoerveld de focus. Gebruik het for-attribuut dat overeenkomt met de id van het invoerveld.
<label for="username">Username</label>
<input type="text" id="username" name="username">Tekstgebied en keuzelijst
Gebruik <textarea> voor meerregelige tekst (bijvoorbeeld opmerkingen). Gebruik <select> met <option>-kinderen voor keuzelijsten. Voeg altijd een standaard lege optie toe met een aanwijzing zoals "Kies een categorie".
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Selectievakjes en keuzerondjes
Groepeer gerelateerde selectievakjes met een <fieldset> en <legend>. Keuzerondjes met dezelfde name laten maar één selectie toe. Elk keuzerondje heeft een eigen label nodig.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Knoppen: submit, reset en button
<button type="submit"> verzendt het formulier. Met type="reset" wis je alle velden. type="button" doet standaard niets en wordt gebruikt met JavaScript-gebeurtenislisteners. Stel het type altijd in: de standaardwaarde is submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Invoervelden groeperen met <fieldset>
<fieldset> groepeert gerelateerde besturingselementen visueel en semantisch. De verplichte <legend> geeft een bijschrift. Schermlezers kondigen de legende aan vóór elk besturingselement in de groep, zodat de context duidelijk is.
Het name-attribuut — wat wordt verzonden
Wanneer een formulier wordt verzonden, sturen browsers voor elk besturingselement het paar name=value. Alleen besturingselementen met een name-attribuut worden opgenomen. Voor selectievakjes worden alleen de aangevinkte vakjes verzonden.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Automatisch invullen en autocomplete
Stel attribuutwaarden voor autocomplete in, zoals email, given-name, new-password of current-password. Zo kunnen wachtwoordbeheerders en automatisch invullen van de browser formulieren correct invullen.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Snelle controle
Wat is het doel van het for-attribuut op een <label>-element?
Samenvatting: toegankelijke HTML-formulieren
Elk invoerveld heeft een label nodig. Kies het juiste type invoerveld voor de gegevens. Groepeer gerelateerde besturingselementen met fieldset. Gebruik button type=submit voor verzending. Benut ingebouwde formulierfuncties — validatie, toetsenbordnavigatie en automatisch invullen — voordat je JavaScript toevoegt.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Formulieren: input, label en button” gratis?
Ja — de volledige tekst van “Formulieren: input, label en button” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Formulieren: input, label en button”?
Bouw toegankelijke HTML-formulieren met gelabelde inputs, verschillende inputtypen, textareas, selects en verzendknoppen. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Formulieren: input, label en button”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Documentstructuur: DOCTYPE, html, head en body
- Semantische tags: header, nav, main, article en footer
- Tekst, afbeeldingen, links en lijsten
- Formulieren: input, label en button