Het element <label>

Attributen

Dit element bevat de globale attributen.

Gebruiksopmerkingen

Een label koppelen aan een formuliercontrole

Het eerste element in het document met een id-attribuut dat overeenkomt met de waarde van het for-attribuut is het gelabelde element voor dit label-element — als het element met die id daadwerkelijk een labelbaar element is. Als het geen labelbaar element is, dan heeft het for-attribuut geen effect. Als er verderop in het document nog andere elementen zijn die ook overeenkomen met de id-waarde, worden die niet in aanmerking genomen.

Meerdere <label>-elementen kunnen aan dezelfde formuliercontrole worden gekoppeld door meerdere <label>-elementen te hebben met dezelfde for-attribuutwaarde, waardoor de formuliercontrole meerdere labels krijgt.

Het koppelen van een <label> aan een formuliercontrole, zoals <input> of <textarea>, biedt enkele belangrijke voordelen:

• De labeltekst is niet alleen visueel geassocieerd met het bijbehorende tekstinvoerveld; deze is er ook programmatisch mee geassocieerd. Dit betekent dat bijvoorbeeld een schermlezer het label voorleest wanneer de gebruiker de focus heeft op het formulierinvoerveld, waardoor het voor een gebruiker van ondersteunende technologie makkelijker wordt te begrijpen welke gegevens moeten worden ingevoerd.
• Wanneer een gebruiker op een label klikt of tikt/aanraakt, geeft de browser de focus door aan de bijbehorende invoer (de resulterende gebeurtenis wordt ook voor de invoer geactiveerd). Dat vergrote klikgebied voor het focussen van de invoer is een voordeel voor iedereen die deze probeert te activeren — ook voor mensen die een aanraakscherm gebruiken.

Er zijn twee manieren om een <label> te koppelen aan een formuliercontrole, gewoonlijk aangeduid als expliciete en impliciete koppeling.

Om een <label>-element expliciet te koppelen aan een <input>-element, moet u eerst het id-attribuut toevoegen aan het <input>-element. Vervolgens voegt u het for-attribuut toe aan het <label>-element, waarbij de waarde van for gelijk is aan de id van het <input>-element.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

U kunt de <input> ook direct nesten binnen het <label>, in welk geval de for- en id-attributen niet nodig zijn omdat de koppeling impliciet is:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Deze twee methoden zijn equivalent, maar er zijn enkele overwegingen:

• Hoewel algemene combinaties van browsers en schermlezers impliciete koppeling ondersteunen, doen niet alle ondersteunende technologieën dit.
• Afhankelijk van uw ontwerp kan het type koppeling invloed hebben op de mogelijkheden om te stylen. Door het <label> en de formuliercontrole tot broer-en-zus-elementen te maken in plaats van ouder-kind, worden ze aparte, aangrenzende vakken, wat een meer aanpasbare layout mogelijk maakt, zoals het uitlijnen ervan met grid- of flex-layoutmethoden.
• Expliciete koppeling vereist dat de formuliercontrole een id heeft, die uniek moet zijn binnen het hele document. Dit is vooral lastig in een gecomponentiseerde applicatie. Frameworks bieden vaak hun eigen oplossingen, zoals React's useId(), maar het vergt nog steeds extra afstemming om het goed te doen.

Over het algemeen raden we aan om expliciete koppeling te gebruiken met het for-attribuut, om compatibiliteit met externe tools en ondersteunende technologieën te garanderen. Sterker nog, u kunt tegelijkertijd nesten en id/for opgeven voor maximale compatibiliteit.

De formuliercontrole die door een label wordt gelabeld, wordt het gelabelde element van het label-element genoemd. Meerdere labels kunnen aan dezelfde formuliercontrole worden gekoppeld:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Elementen die kunnen worden gekoppeld aan een <label>-element zijn onder andere <button>, <input> (behalve voor type="hidden"), <meter>, <output>, <progress>, <select> en <textarea>.

Toegankelijkheid

Interactieve inhoud

Naast de impliciet gekoppelde formuliercontrole, mag u geen extra interactieve elementen zoals anchors of buttons binnen een <label> plaatsen. Dit maakt het voor mensen moeilijker om het formulierinvoerveld te activeren dat aan het label is gekoppeld.

Doe dit niet:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Geef de voorkeur aan dit:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Kopteksten

Het plaatsen van kopelementen binnen een <label> verstoort veel soorten ondersteunende technologie, omdat kopteksten vaak worden gebruikt als navigatiehulpmiddel. Als de tekst van het label visueel moet worden aangepast, gebruik dan CSS-klassen die op het <label>-element worden toegepast in plaats daarvan.

Als een formulier, of een sectie van een formulier, een titel nodig heeft, gebruik dan het <legend>-element geplaatst binnen een <fieldset>.

Doe dit niet:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Geef de voorkeur aan dit:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Knoppen

Een <input>-element met een type="button"-declaratie en een geldig value-attribuut heeft geen bijbehorend label nodig. Dit doen kan zelfs interfereren met de manier waarop ondersteunende technologie de knopinvoer verwerkt. Hetzelfde geldt voor het <button>-element.

Voorbeelden

Een impliciet label definiëren

<label>Click me <input type="text" /></label>

Een expliciet label definiëren met het "for"-attribuut

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Technische samenvatting