Labels gebruiken in een formulier

Binnen een formulier zijn aan de drukknoppen automatisch labels verbonden. Bij de meeste andere formulier elementen is dat echter niet het geval. Daar moet je ze er apart bij zetten en zijn ze -dus- geen onderdeel van het formulier element. Met behulp van de tag <label> kun je informatie te verbinden aan tekstvelden, aankruisvakjes, keuzerondjes, tekstvakken en keuzelijsten.

We beginnen met een voorbeeld.
 
Hiernaast zie je twee, ogenschijnlijk gelijke, rijtjes met keuzerondjes en aankruisvakjes. In het linker rijtje moet je echt op het rondje of vierkantje klikken om het te activeren. In het rechter rijtje kun je ook op de tekst er naast klikken.

Het effect in de rechter kolom bereik je met de tag <label>. Op deze bladzijde wordt het gebruik ervan besproken.
 

• De eenvoudigste tweede manier om dit te gebruiken is door het formulier-element binnen een <label>-tag te plaatsen. De code ziet er als volgt uit:

  <label>
  <input type="radio" name="Kleur" value="Rood">Rood
  </label>

  Deze eenvoudige methode volstaat voor de meeste toepassingen.
   
• Er is ook een tweede aanpak mogelijk, waarbij het formulier-element niet binnen de <label>-tag staat. Daarmee ben je veel vrijer in het bouwen van de HTML-code. Het werkt als volgt:
  1. Elk formulier element waar je een label aan wilt koppelen geef je een id-attribuut, bijvoorbeeld aaa.
  2. Maak voor elk label een <label>-tag aan. Dat koppel je aan het formulier-element via het attribuut for. De code ziet er dan bijvoorbeeld als volgt uit:

     <input type="radio" id="aaa" name="Kleur" value="Rood">
     <label for="aaa">Rood</label>

   
• De tag <label> kan gebruikt worden in combinatie met:
  • Alle tags <input type="…">
  • De tags <progress> en <meter>.
• De tag <label> hoeft niet binnen de grenzen van een formulier (dus tussen de <form> ... </form>-tags) te worden geplaatst. Het mag vrijwel overal in de BODY worden neergezet. Uitzonderingen zijn:
  

  dl, ol, table, ul, button, label, map, script, select en textarea.

  Dit geldt ook voor de (in HTML5 niet meer bestaande) tags dir en menu.
• <label> mag niet voorkomen binnen <table>, maar wel binnen <td>.
  <label> mag niet voorkomen binnen <ol> of <ul>, maar wel binnen <li>.
  <label> mag ook niet voorkomen binnen <dl>, maar wel binnen <dt> en <dd>.
  Het is toegestaan om een textarea binnen een <label> te zetten, andersom niet.
   
• Voor het opmaken van de tekst van een label kunnen id, class en style-attributen worden ingezet. binnen <label> zijn alle mogelijke opmaak-tags beschikbaar (<b>, <i>, <div>, <span>, enz.).
• Met behulp van het attribuut accesskey kan een toets van het toetsenbord aan het betreffende label worden gekoppeld, bijvoorbeeld:

  <label accesskey="A"> ...... </label>

  Als de A op het toetsenbord wordt ingedrukt, activeert dat het element dat aan het label is gekoppeld.
• Merk op dat accesskey bij alle moderne browsers onder Windows en Linux alleen werkt in combinatie met ALT (FireFox gebruikt SHIFT+ALT). Op de Mac gebruik je accesskey in combinatie met CONTROL+ALT. Bij sommige (oudere) browsers moet accesskey vooraf worden gegaan door een speciale toetscombinatie zoals SHIFT+ESC.