Web: Essentials

Appearance

HTML: formulieren ​

In HTML kan je formulieren (forms) maken om gegevens van gebruikers te verzamelen. Een formulier wordt gemaakt met de <form> tag en bevat verschillende invoervelden.

De form tag ​

De <form> tag omsluit alle invoervelden van je formulier.

html
<form>
  <!-- invoervelden komen hier -->
</form>

Extra: versturen van formulieren ​

Om een formulier effectief te versturen heeft deze twee belangrijke attributen:

html
<form action="/submit" method="POST">
  <!-- invoervelden komen hier -->
</form>
  • action: het pad waar de gegevens naartoe gestuurd worden
  • method: hoe de gegevens verstuurd worden (meestal GET of POST)

Invoervelden ​

Input velden ​

Het <input> element is de meest gebruikte tag voor invoervelden. Dit is een enkelvoudige tag die verschillende types kan hebben:

html
<!-- Tekst invoer -->
<input type="text" name="voornaam" placeholder="Je voornaam" />

<!-- Email invoer -->
<input type="email" name="email" placeholder="je@email.com" />

<!-- Wachtwoord invoer -->
<input type="password" name="wachtwoord" />

<!-- Numerieke invoer -->
<input type="number" name="leeftijd" min="0" max="120" />

<!-- Datum invoer -->
<input type="date" name="geboortedatum" />

Tekst invoer

Email invoer

Wachtwoord invoer

Numerieke invoer

Datum invoer

Textarea ​

Voor langere teksten gebruik je <textarea>:

html
<textarea name="bericht" rows="5" cols="30" placeholder="Je bericht hier..."></textarea>

Select dropdown ​

Voor keuzemenu's gebruik je <select> met <option> elementen:

html
<select name="land">
  <option value="be">België</option>
  <option value="nl">Nederland</option>
  <option value="fr">Frankrijk</option>
</select>

Checkboxes en radio buttons ​

html
<!-- Checkbox voor meerdere keuzes -->
<input type="checkbox" name="nieuwsbrief" id="nieuwsbrief" value="ja" />
<label for="nieuwsbrief">Ik wil de nieuwsbrief ontvangen</label>

<!-- Radio buttons voor één keuze uit meerdere opties -->
<input type="radio" name="geslacht" value="man" />
<label for="man">Man</label>
<input type="radio" name="geslacht" value="vrouw" />
<label for="women">Vrouw</label>

Checkbox voor meerdere keuzes

Radio buttons voor één keuze uit meerdere opties

Labels ​

Het <label> element koppelt tekst aan een invoerveld. Dit verbetert de toegankelijkheid en gebruiksvriendelijkheid:

html
<label for="email">Email adres:</label>
<input type="email" id="email" name="email" />

<!-- Of je kan het invoerveld in de label plaatsen -->
<label>
  Voornaam:
  <input type="text" name="voornaam" />
</label>

Submit button ​

Om het formulier te versturen gebruik je een submit knop:

html
<input type="submit" value="Verzenden" />

<!-- Of met een button tag -->
<button type="submit">Formulier versturen</button>

Of met een button tag

Validatie attributen ​

HTML heeft ingebouwde validatie die je kan gebruiken:

html
<!-- Verplichte velden -->
<input type="text" name="naam" required />

<!-- Minimum en maximum lengtes -->
<input type="text" name="gebruikersnaam" minlength="3" maxlength="20" />

Voorbeeld van een volledig formulier ​

html
<form action="/contact" method="POST">
  <label for="naam">Volledige naam:</label>
  <input type="text" id="naam" name="naam" required />
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />
  
  <label for="onderwerp">Onderwerp:</label>
  <select id="onderwerp" name="onderwerp">
    <option value="vraag">Vraag</option>
    <option value="klacht">Klacht</option>
    <option value="compliment">Compliment</option>
  </select>
  
  <label for="bericht">Bericht:</label>
  <textarea id="bericht" name="bericht" rows="5" required></textarea>
  
  <label for="nieuwsbrief">
    <input type="checkbox" id="nieuwsbrief" name="nieuwsbrief" />
    Ik wil de nieuwsbrief ontvangen
  </label>
  
  <button type="submit">Bericht versturen</button>
</form>

Toegankelijkheid en gebruiksvriendelijkheid ​

  • Gebruik altijd <label> elementen voor je invoervelden
  • Gebruik de juiste type attributen voor betere gebruikerservaring op mobiele toestellen
  • Maak belangrijke velden required