Het <label>-element wordt gebruikt om een label te associëren met een invoerveld op een formulier. Deze associatie helpt gebruikers de informatie te begrijpen die in het formulier wordt gevraagd. Wanneer een gebruiker op het label klikt, wordt automatisch gefocust op het bijbehorende invoerveld.

Er zijn twee manieren om label- en invoerelementen te verbinden:

Omhulling

Door een formelement, zoals een <input/>-veld, binnen een <label>-element te nestelen, legt de browser automatisch een link tussen het label en het invoerveld. Bijvoorbeeld:

In dit voorbeeld zal het klikken op de labeltekst "Naam" automatisch het bijbehorende invoerveld in focus brengen.

Het id-attribuut gebruiken

Wanneer een formelement niet genest is binnen een <label>-element, koppel je ze handmatig door het id-attribuut van het input-element en het for-attribuut van het label te gebruiken. De waarde van het for-attribuut en het id-attribuut moeten hetzelfde zijn. Bijvoorbeeld:

In dit geval is het label gekoppeld aan het invoerveld met behulp van het for-attribuut op het label en het id-attribuut op het invoerveld. Het klikken op de labeltekst "Naam" zal ook het bijbehorende invoerveld in focus brengen.

Opmerking

Door deze methoden te gebruiken, leg je een visuele en semantische verbinding tussen het label en het input-veld. Er kunnen echter situaties zijn waarin het onmogelijk is om het input-element binnen het label te plaatsen vanwege stylingbeperkingen of website-logica. In dergelijke gevallen vertrouw je vaak op attribuutverbindingen om flexibiliteit te behouden bij het toepassen van stijlen en het implementeren van achtergrondlogica.

Laten we het verschil tussen de twee benaderingen onderzoeken door de code in de afbeelding te bekijken.

Opmerking

Vanuit het perspectief van de browser is de gekozen benadering om de verbinding tot stand te brengen niet van belang. Beide methoden bereiken hetzelfde resultaat van het koppelen van het label en het invoerveld voor verbeterde bruikbaarheid en toegankelijkheid.