Avec l’élément HTML

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

À quoi sert la balise HTML label ?

La balise HTML label est par­ti­cu­liè­re­ment im­por­tante pour la clarté et l’ac­ces­si­bi­lité d’un site Web. Elle est utilisée dans les for­mu­laires et ajoute une légende ex­pli­ca­tive ou une étiquette à des éléments tels que les champs de saisie, les boutons ou les cases à cocher.

Ceci est par­ti­cu­liè­re­ment important pour deux cas d’ap­pli­ca­tion. D’une part, elle facilite la na­vi­ga­tion sur un site Web pour les in­ter­nautes qui ont des problèmes avec les petites surfaces. Comme la zone cliquable s’agrandit, il est également plus facile de cliquer. D’autre part, pour les uti­li­sa­teurs qui utilisent un lecteur d’écran, l’élément HTML permet de lire les légendes à haute voix. Cela améliore la con­vi­via­lité pour tous les visiteurs de votre site.

Comment utiliser la balise label en HTML ?

La balise label peut être utilisée de deux façons en HTML. Avec l’attribut for, vous pouvez relier lo­gi­que­ment le label di­rec­te­ment au champ de saisie. Vous pouvez également intégrer le for­mu­laire à côté de l’étiquette di­rec­te­ment à l’intérieur de la balise label. Pour une meilleure il­lus­tra­tion, voici les deux options dis­po­nibles pour label en HTML.

Pour les cases à cocher :

<p>
<input type="checkbox" name="lu" id="read" value="ja" />
<label for="read">J’ai lu les conditions</label>
</p>

Il est important que l’attribut for, utilisé dans la balise label, ait la même valeur que l’attribut id du champ de saisie.

Pour les boutons :

<input type="radio" id="radio" value="accepter" />
<label for="read">Accepter</label>

Avec la deuxième option, la légende est incluse. Voici à quoi cela ressemble :

<p>
<label>
<input type="checkbox" name="lu" value="ja" />
J’ai lu les conditions
</label>
</p>

Quels éléments sont concernés par la balise label ?

Pour permettre par exemple aux uti­li­sa­teurs et uti­li­sa­trices de lecteurs d’écran d’accéder à votre site, les éléments suivants doivent être marqués avec une balise label en HTML :

  • Champs de saisie : <input type="text" />, <input type="password" />, <testarea>
  • Cases à cocher : <input type="checkbox" />
  • Boutons : <input type="radio" />
  • Listes de sélection : <select>
  • Champs pour les té­lé­char­ge­ments : <input type="file" />

Quels sont les attributs pris en charge par la balise label ?

La balise label supporte tous les attributs HTML uni­ver­sels ainsi que les attributs d’évé­ne­ments. Pour cela, les attributs suivants peuvent être associés à la balise HTML :

for : l’attribut for permet de dé­ter­mi­ner l’ID de l’élément d’entrée auquel la balise doit être associée. Cela signifie également que dans un document, le premier élément d’entrée cor­res­pon­dant à cette valeur est au­to­ma­ti­que­ment associé à la légende.

form : l’attribut form définit quel élément de forme doit être associé à la balise label en HTML. Dans la pratique, cela se présente par exemple comme suit :

<form id="participant">
<label class="h2" form="participant">Nom</label>
<label for="prénom">Prénom</label>
<input name="prénom" id="prénom" maxlength="25">
<label for="nomdefamille">Nom de famille</label>
<input name="nomdefamille" id="nomdefamille" maxlength="30">
<button>Valider les données</button>
</form>
Conseil

Créez un site Internet qui vous ressemble ! Avec l’outil de création de sites Web de IONOS, vous concevez vous-même votre page pro­fes­sion­nelle, sans con­nais­sances préa­lables. Vous pouvez également faire appel à l’expertise de nos dé­ve­lop­peurs. Choi­sis­sez sim­ple­ment la solution qui convient le mieux à vos besoins !

Aller au menu principal