HTMLhulp.nl logo
Formulieren die werken in HTML

Formulieren die werken in HTML

Formulieren die werken in HTML

Formulieren zijn onmisbaar op het web. Denk aan contactformulieren, loginpagina’s, zoekvelden of bestelformulieren. Waar je ook kijkt, overal vind je HTML-formulieren terug. Toch gaat er in de praktijk veel mis: verkeerde velden, slechte toegankelijkheid of ontbrekende validatie. In dit artikel leer je stap voor stap hoe je een formulier maakt dat niet alleen werkt, maar ook gebruiksvriendelijk, veilig en toegankelijk is.

Wat is een HTML-formulier?

Een formulier in HTML is een verzameling velden waarin de gebruiker gegevens kan invullen. Die gegevens worden vervolgens naar een server gestuurd of door JavaScript verwerkt. Een formulier begint altijd met een <form>-tag en eindigt daarmee.

Voorbeeld:

<form action="/verwerk.php" method="post">
<label for="naam">Naam:</label>
<input type="text" id="naam" name="naam">
<button type="submit">Verstuur</button>
</form>

De belangrijkste onderdelen:

  • action bepaalt waar de gegevens naartoe gestuurd worden

  • method bepaalt hoe de gegevens verstuurd worden (get of post)

  • Formuliervelden zoals tekstvakken, selecties, knoppen

  • Labels die de velden beschrijven

De verschillende input types

Het <input>-element is veelzijdig en heeft veel varianten. Een paar belangrijke types:

  • text – een gewoon tekstveld

  • email – een veld dat controleert op e-mailadres

  • password – verbergt ingevoerde tekens

  • number – accepteert alleen cijfers

  • date – datumselectie

  • checkbox – een selectievakje

  • radio – een keuzerondje voor één optie

  • file – uploaden van bestanden

  • submit – knop om het formulier te versturen

Voorbeeld met meerdere velden:

<form>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required><label for=“wachtwoord”>Wachtwoord:</label>
<input type=“password” id=“wachtwoord” name=“wachtwoord” required>

<label>
<input type=“checkbox” name=“voorwaarden” required>
Ik ga akkoord met de voorwaarden
</label>

<button type=“submit”>Inloggen</button>
</form>

Labels: onmisbaar voor gebruiksvriendelijkheid

Een formulier zonder duidelijke labels is verwarrend. Elk veld hoort gekoppeld te zijn aan een <label>. Dit doe je met het for-attribuut dat overeenkomt met de id van het invoerveld.

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

Dit lijkt misschien klein, maar is enorm belangrijk. Niet alleen begrijpen gebruikers direct wat ze moeten invullen, ook schermlezers weten zo welke tekst bij welk veld hoort.

Validatie van gegevens

Niemand wil een formulier krijgen met half ingevulde of verkeerde gegevens. HTML5 heeft ingebouwde validatie die je met simpele attributen kunt gebruiken:

  • required – verplicht veld

  • pattern – regex-patroon voor specifieke invoer

  • min, max – minimale of maximale waarde

  • maxlength – maximale lengte van tekst

Voorbeeld:

<input type="text" name="postcode" pattern="[0-9]{4}[A-Z]{2}" required>

Dit accepteert alleen een Nederlandse postcode zoals 1234AB.

Structuur met fieldset en legend

Bij langere formulieren kun je velden groeperen met <fieldset> en er een titel aan geven met <legend>.

<fieldset>
<legend>Persoonlijke gegevens</legend>
<label for="naam">Naam:</label>
<input type="text" id="naam" name="naam">
</fieldset>

Dit maakt het formulier overzichtelijker en helpt ook bij toegankelijkheid.

Toegankelijkheid (a11y)

Een goed formulier moet bruikbaar zijn voor iedereen, ook voor mensen die een schermlezer gebruiken of alleen met een toetsenbord navigeren.

Tips:

  • Gebruik altijd labels.

  • Zorg dat de volgorde van velden logisch is.

  • Voeg aria-labels toe als een veld extra uitleg nodig heeft.

  • Maak foutmeldingen zichtbaar én hoorbaar.

Voorbeeld foutmelding:

<label for="email">E-mail</label>
<input type="email" id="email" aria-describedby="error-email">
<span id="error-email" class="error">Voer een geldig e-mailadres in.</span>

Beveiliging: vergeet dit niet

Formulieren zijn een veelgebruikte ingang voor misbruik. Let daarom altijd op:

  • Gebruik https zodat gegevens versleuteld worden verstuurd.

  • Valideer niet alleen in HTML maar ook op de server.

  • Bescherm tegen spam met reCAPTCHA of een eenvoudige honeypot.

  • Beperk bestandstypen en groottes bij uploads.

Styling met CSS

Een kaal formulier oogt onvriendelijk. Met CSS kun je het aantrekkelijker maken:

form {
max-width: 400px;
margin: 0 auto;
font-family: sans-serif;
}
label {
display: block;
margin-top: 10px;
}
input, button {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #00bf63;
color: white;
border: none;
}

Zo maak je het formulier overzichtelijk en gebruiksvriendelijk.

Praktisch voorbeeld: contactformulier

Een compleet contactformulier kan er zo uitzien:

<form action="/verwerk-contact.php" method="post">
<fieldset>
<legend>Contactformulier</legend><label for=“naam”>Naam</label>
<input type=“text” id=“naam” name=“naam” required>

<label for=“email”>E-mail</label>
<input type=“email” id=“email” name=“email” required>

<label for=“bericht”>Bericht</label>
<textarea id=“bericht” name=“bericht” rows=“5” required></textarea>

<label>
<input type=“checkbox” name=“nieuwsbrief”>
Ja, ik wil de nieuwsbrief ontvangen
</label>

<button type=“submit”>Verstuur</button>
</fieldset>
</form>

Veelgemaakte fouten bij formulieren

  1. Geen labels gebruiken of alleen placeholders tonen.

  2. Te veel verplichte velden waardoor gebruikers afhaken.

  3. Geen duidelijke foutmeldingen tonen.

  4. Validatie alleen aan de voorkant doen en niet op de server.

  5. Formulieren zonder beveiliging waardoor spam of hacks ontstaan.

Waarom goede formulieren het verschil maken

Een formulier is vaak het belangrijkste onderdeel van een website. Het is de plek waar bezoekers zich aanmelden, contact opnemen of een aankoop doen. Een slecht formulier kan bezoekers frustreren en conversies kosten. Een goed ontworpen formulier daarentegen wekt vertrouwen en vergroot de kans dat mensen hem volledig invullen.