HTML <label> tag

Definitie en gebruik

<label> Het etiket definieert een annotatie (label) voor het input-element.

Het etiket toont geen speciale effecten aan de gebruiker. Het verbetert echter de bruikbaarheid voor muisgebruikers. Als je op de tekst in het etiket klikt, wordt dit controleerbaar geactiveerd. Dit betekent dat wanneer de gebruiker het etiket selecteert, de browser automatisch de focus verplaatst naar het bijbehorende formuliercontrole-element.

<label> Het etiket for-eigenschap Moet overeenkomen met de id-eigenschap van het bijbehorende element.

<label> Een etiket kan een etiket (label) definiëren voor meerdere elementen:

Het juiste gebruik van de hierboven genoemde elementen met het label is nuttig voor de volgende gebruikers:

  • Schermlezende gebruikers (wanneer de gebruiker zich op een element concentreert, wordt het etiket voorgelezen)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> Wanneer de tekst in het element wordt gewisseld, schakelt het de invoer in (wat het klikgebied vergroot) voor gebruikers die moeilijk kleine gebieden kunnen klikken (bijvoorbeeld selectievakjes) - omdat wanneer gebruikers klikken

Zie ook:

HTML DOM ReferentiesLabel object

Voorbeeld

Drie selectievakjes met label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Indienen">
</form>

Probeer het zelf

Tips en opmerkingen

Tip:<label> De for-eigenschap moet gelijk zijn aan de id-eigenschap van het gerelateerde element om ze te kunnen koppelen. Het is ook mogelijk om de elementen te plaatsen in <label> Het element bindt het label binnenin het element.

Kenmerken

Kenmerken Waarde Beschrijving
for Element id Bepaalt aan welke formulierelement de label gebonden is.
form Formulier id Bepaalt het formulierveld van de labelveld.

Globale kenmerken

<label> Labels ondersteunen ook Globale kenmerken in HTML.

Eventuelekenmerken

<label> Labels ondersteunen ook Eventuelekenmerken in HTML.

Standaard CSS instellingen

De meeste browsers tonen de volgende standaardwaarden weergegeven <label> Element:

label {
  cursor: default;
}

Probeer het zelf

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning