Radio buttons (één keuze)

Een invoerveld met type="radio" geeft de mogelijkheid om de gebruiker één optie te laten kiezen uit meerdere mogelijkheden. Koppel aan dit invoerveld altijd een label met de toelichting van die optie. Geef samenhorende radio buttons altijd dezelfde waarde voor het name-attribuut, dan kan de gebruiker maar één optie kiezen. Met het attribuut value beschrijf je de waarde die moet verstuurd worden bij het aanklikken van de radiobutton.

Voorbeeld: radio.html (Klik op deze link om onderstaand formulier te zien in je browser.)

<form>
    <p>Wat is je favoriete kleur?</p>
    <input type="radio" id="rood" name="kleur" value="rood">
    <label for="rood">Rood</label>
    <input type="radio" id="blauw" name="kleur" value="blauw">
    <label for="blauw">Blauw</label>
    <input type="radio" id="groen" name="kleur" value="groen">
    <label for="groen">Groen</label>
    <br>
    <br>
    <button type="submit">Verzenden</button>
</form>

Checkbox (meerdere keuzes)

Een invoerveld met type="checkbox" geeft de gebruiker de mogelijkheid om meerdere opties te laten kiezen. Geef samenhorende checkboxen altijd dezelfde waarde voor het name-attribuut (zoals bij radio buttons).

Voorbeeld: check.html (Klik op deze link om onderstaand formulier te zien in je browser.)

  <form>
      <p>Welke hobby's heb je?</p>
      <input type="checkbox" id="sport" name="hobby" value="sport">
      <label for="sport">Sport</label><br>
      <input type="checkbox" id="muziek" name="hobby" value="muziek">
      <label for="muziek">Muziek</label><br>
      <input type="checkbox" id="gamen" name="hobby" value="gamen">
      <label for="gamen">Gamen</label>
      <br><br>
      <button type="submit">Verzenden</button>
  </form>

Drop-down menu (select)

Een derde mogelijkheid om de gebruiker iets te laten kiezen is een dropdown-menu. Hiervoor gebruik je de <select>-tag, waar de verschillende opties opgesomd worden in <option>-tags. Het attribuut value beschrijft ook hier welke waarde er zal verstuurd worden.

Voorbeeld: dropdown.html (Klik op deze link om onderstaand formulier te zien in je browser.)

<form>
    <label for="land">Kies je land:</label>
    <select id="land" name="land">
        <option value="nl">Nederland</option>
        <option value="be">België</option>
        <option value="de">Duitsland</option>
    </select>
    <button type="submit">Verzenden</button>
</form>

Samenvatting