Label tag

Het tag label definieert een label voor een invoerveld van het type input, textarea, select en zo verder.

Het label wordt aan een specifiek invoerveld gekoppeld met behulp van het attribuut for. Hierin moet de waarde van het attribuut id van het invoerveld worden opgegeven waaraan het label is gekoppeld. Ook wordt een label aan een element gekoppeld als dat element binnen het tag label wordt geplaatst. In dit geval hoeft het attribuut for niet te worden opgegeven. Zie de voorbeelden voor een beter begrip.

Bij het klikken op het label zullen de daaraan gekoppelde checkboxes of radio knoppen hun status wijzigen van aangevinkt naar niet-aangevinkt en vice versa. Het label is in dit geval bedoeld voor het gemak: het is moeilijk om met de cursor op kleine formulierelementen te klikken, terwijl dit bij een lang label met tekst veel gemakkelijker is.

Het aan het label gekoppelde tekstinvoerveld van het type input en textarea zal de invoerfocus krijgen. Focus - is wanneer de cursor knippert in het invoerveld, in dit geval, als u iets typt op het toetsenbord - zal de tekst in dit veld verschijnen (zie de pseudoklasse focus voor een geavanceerd begrip van focus).

Het label label kan worden gebruikt om een checkbox of radio knop te simuleren. Dit is nodig om een checkbox of radio met een eigen ontwerp te maken (wat in CSS verboden is, maar met behulp van slimme trucs mogelijk is).

Attributen

Attribuut	Beschrijving
for	In dit attribuut moet de waarde van het id-attribuut van het invoerveld worden opgegeven waaraan het label label is gekoppeld.
accesskey	Definieert een sneltoets waarmee naar het aan het label gekoppelde (via het attribuut for) formulierelement kan worden genavigeerd. Zie voor meer details het attribuut accesskey.

Voorbeeld . Checkbox

Laten we een label koppelen aan een checkbox checkbox met behulp van het attribuut for. Klik op het label en u ziet de status van de checkbox veranderen van aangevinkt naar niet-aangevinkt en vice versa:

:

Voorbeeld . Binnen label

Laten we nu het label niet koppelen via het attribuut for, maar de elementen direct in het tag label plaatsen, in dit geval zal klikken op de tekst van label ook leiden tot activering van het element:

:

Voorbeeld . Tekstinvoerveld

Laten we een label koppelen aan een tag input met behulp van het attribuut for. Klikken op het label zal leiden tot het verkrijgen van focus door het invoerveld. Tegelijkertijd zal de tekst in het veld (toegevoegd met het attribuut value) geselecteerd worden. Als u iets begint te typen op het toetsenbord - zal deze tekst worden overschreven. U kunt de selectie opheffen zonder de tekst te verwijderen door met de muis op het invoerveld te klikken: de focus verdwijnt dan niet, maar de selectie wel:

:

Zie ook