w3docs logo

Tag HTML <label>

Le tag <label> définit l’étiquette de texte pour le tag <input>. L'étiquette est un texte ordinaire, en cliquant sur lequel l'utilisateur peut sélectionner l'élément de formulaire. Cela facilite l'utilisation du formulaire, car il n'est pas toujours pratique d'entrer dans les éléments du formulaire avec le curseur.

Syntaxe

Le tag <label> est apparié; le texte est placé entre le tag ouvrant (<label>) et le tag fermant (</label>).

Le tag <label> est utilisé aussipour définir des raccourcis clavier sur le clavier et accéder à l'élément actif comme des liens.

Vous pouvez lier l'étiquette de texte et le formulaire auquel elle se rapporte, de deux manières:

  1. installer l’identificateur id dedans l’élément de saisie et indiquer son nom en tant de l’attribut pour le tag <label>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form>
      <label for="lfname">Prénom:</label> 
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Résultat

Nom
  1. Placer la saisie dans le tag <label>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form>
      <label>Nom
      <input id="User" name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Résultat

Name

Exemple (Exemple d'une formulaire dans lequel la balise 

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona"><br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid"><br />
    </form>
  </body>
</html>

Résultat

Football team

Utilisez les propriétés font de CSS pour styler l'élément the <label> .

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label>Votre Prénom:</label>
      <input id="User" name="Name" type="text"/>
    </form>
  </body>
</html>

Résultat

Name

Attributs

Attribut Valeur Description
accesskey accesskey Définit un raccourci clavier avec lequel vous pouvez accéder à l'élément de formulaire lié à l'étiquette (via l'attribut for).
for element_id Définit l'identificateur de l'élément auquel l'étiquette doit être attachée.
form form_id Détermine la ou les formes auxquelles l'étiquette sera associée. Cet attribut vous permet de placer des tags à n'importe quel endroit du document et pas seulement en tant qu'enfant de l'élément du tag <form>.
L’élément a été supprimé de la specification de HTML.

Le tag <label> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <label> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <label>:

Coloration du texte dans le tag HTML <label>:

Styles de mise en page du texte pour la tag HTML <label>:

Autres propriétés utiles pour le tag HTML <label>:

Support de Navigateurs

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Pratiquez vos connaissances

Quel est le rôle de la balise <label> en HTML?
Trouvez-vous cela utile?