HTML <label> -tag
Voorbeeld
Drie keuzerondjes met labels:
<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="Submit">
</form>
Definitie en gebruik
De <label>tag definieert een label voor verschillende elementen:
- <input type="checkbox">
- <input type="kleur">
- <input type="date">
- <input type="datetime-local">
- <invoertype="e-mail">
- <input type="file">
- <input type="maand">
- <input type="nummer">
- <input type="wachtwoord">
- <input type="radio">
- <input type="bereik">
- <input type="zoeken">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <voortgang>
- <select>
- <tekstgebied>
Correct gebruik van labels met de bovenstaande elementen zal ten goede komen aan:
- Gebruikers van schermlezers (lezen het label hardop voor wanneer de gebruiker zich op het element concentreert)
- Gebruikers die moeite hebben met het klikken op zeer kleine regio's (zoals selectievakjes) - omdat wanneer een gebruiker op de tekst in het
<label>element klikt, de invoer wordt omgeschakeld (dit vergroot het hitgebied).
Tips en opmerkingen
Tip: Het for attribuut van <label>
moet gelijk zijn aan het id attribuut van het gerelateerde element om ze samen te binden. Een label kan ook aan een element worden gebonden door het element in het <label>element te plaatsen.
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Algemene kenmerken
De <label>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <label>tag ondersteunt ook de Event Attributes in HTML .
Gerelateerde pagina's
HTML DOM-referentie: Label Object
Standaard CSS-instellingen
De meeste browsers geven het <label>element weer met de volgende standaardwaarden:
Voorbeeld
label {
cursor: default;
}