path: root/files/fr/archive/mozilla/xul/label/index.html

---
title: label
slug: Archive/Mozilla/XUL/label
tags:
  - Éléments_XUL
translation_of: Archive/Mozilla/XUL/label
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
 « <a href="/fr/docs/Référence_XUL">Accueil de la référence XUL</a>    [
 <a href="#Exemples">Exemples</a> |
 <a href="#Attributs">Attributs</a> |
 <a href="#Propri.C3.A9t.C3.A9s">Propriétés</a> |
 <a href="#M.C3.A9thodes">Méthodes</a> |
 <a href="#Sujets_li.C3.A9s">Sujets liés</a> ]
</span></div> <p>Cet élément est utilisé pour fournit un label pour un élément de contrôle. Si l'utilisateur clique sur le label, le focus se placera sur le contrôle associé, tel que spécifié avec l'attribut <code id="a-control"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/control">control</a></code>.
</p><p>Pour plus d'informations, consultez le <a href="fr/Tutoriel_XUL/Ajouter_des_libell%c3%a9s_et_des_images">Tutoriel XUL</a>.
</p>
<dl><dt> Attributs
</dt><dd> <a href="#a-accesskey">accesskey</a>, <a href="#a-control">control</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-href">href</a>, <a href="#a-label.value">value</a>
</dd></dl>
<dl><dt> Propriétés
</dt><dd> <a href="#p-accessKey">accessKey</a>, <a href="#p-accessibleType">accessibleType</a>, <a href="#p-control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-value">value</a>
</dd></dl>
<dl><dt> Classes de style
</dt><dd> <a href="#s-header">header</a>, <a href="#s-indent">indent</a>, <a href="#s-monospace">monospace</a>, <a href="#s-plain">plain</a>, <a href="#s-small-margin">small-margin</a>, <a href="#s-text-link">text-link</a> </dd></dl>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<div class="float-right"><img alt="Image:XUL_ref_label.png"></div>
<pre class="eval">&lt;label value="Email address" control="email"/&gt;
&lt;textbox id="email"/&gt;
</pre>
<h3 id="Attributs" name="Attributs"> Attributs </h3>
<p>
</p><div id="a-accesskey">

<dl><dt> <code id="a-accesskey"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/accesskey">accesskey</a></code></dt>
<dd> Type : <i>caractère</i>
</dd><dd> Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut <code><code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code></code> de l'élément. </dd></dl>
<h4 id="Exemple" name="Exemple"> Exemple </h4>
<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div>
<pre>&lt;vbox&gt;
  &lt;label value="Entrez votre nom" accesskey="e" control="myName"/&gt;
  &lt;textbox id="myName"/&gt;
  &lt;button label="Annuler" accesskey="n"/&gt;
  &lt;button label="OK" accesskey="O"/&gt;
&lt;/vbox&gt;
</pre>
<h4 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"> Voir également </h4>
<p>Les attributs <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code> et <code id="a-acceltext"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/acceltext">acceltext</a></code>
</p>
</div>
<div id="a-control">

</div>
<div id="a-crop">

<dl><dt> <code id="a-crop"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/crop">crop</a></code>
</dt><dd> Type : <i>une des valeurs ci-dessous</i>
</dd><dd> Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut <code>crop</code>. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également.
</dd></dl>
<ul><li> <code>start</code> : Le texte sera tronqué du côté gauche.
</li><li> <code>end</code> : Le texte sera tronqué du côté droit.
</li><li> <code>left</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté gauche.
</li><li> <code>right</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté droit.
</li><li> <code>center</code> : Le texte sera tronqué en son milieu, en affichant le début et la fin normalement.
</li><li> <code>none</code> : Le texte ne sera pas tronqué avec une ellipse. Cependant il sera simplement coupé là où il est trop large. Le côté dépend de l'alignement CSS.
</li></ul>


</div>
<div id="a-disabled">

<dl><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Indique si l'élément est ou non désactivé. Si cette valeur est définie à <code>true</code>, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement <code>command</code> ne se déclenchera pas. </dd></dl>
<p><br>
</p>
<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png"></div>
<pre>&lt;!-- La case à cocher active/désactive le bouton --&gt;
&lt;checkbox label="Enable button"
    onclick="document.getElementById('buttRemove').disabled = this.checked"/&gt;
&lt;button id="buttRemove" label="Remove All" disabled="true"/&gt;
</pre>
</div>
<div id="a-href">

</div>
<div id="a-label.value">

</div>

<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s"> Propriétés </h3>
<p>
</p><div id="p-accessKey">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/accessKey">accessKey</a></span></code>
</dt><dd> Type : <i>caractère</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-accesskey"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/accesskey">accesskey</a></code>.
</dd></dl>
<p><br>
</p>

</div>
<div id="p-accessibleType">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/accessibleType">accessibleType</a></span></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> Une valeur indiquant le type d'objet d'accessibilité pour l'élément.
</dd></dl>
</div>
<div id="p-control"></div>
<div id="p-crop">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/crop">crop</a></span></code>
</dt><dd> Type : <i>chaîne de caractères</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-crop"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/crop">crop</a></code>.
</dd></dl>

</div>
<div id="p-disabled">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/disabled">disabled</a></span></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>.
</dd></dl>

</div>
<div id="p-value">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/value">value</a></span></code>
</dt><dd> Type : <i>chaîne</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-value"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/value">value</a></code>.
</dd></dl>

</div>

<h3 id="M.C3.A9thodes" name="M.C3.A9thodes"> Méthodes </h3>
<p><span class="lang lang-fr" lang="fr">
</span></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Héritées de XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Héritées de DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
</table>

<h3 id="Classes_de_style" name="Classes_de_style"> Classes de style </h3>
<p>Les classes suivantes peuvent être utilisées pour styler l'élément. Ces classes doivent être utilisées plutôt que de changer directement le style de l'élément, car elles s'intègreront plus naturellement dans le thème sélectionné par l'utilisateur.
</p><dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/header">header</a></code></dt>
 <dd>A class used for headings. Typically, this will cause the text to appear bold.</dd>
</dl>
<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/indent">indent</a></code></dt>
 <dd>This class causes the text to be indented on its left side.</dd>
</dl>
<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/monospace">monospace</a></code></dt>
 <dd>This class causes the text to be displayed in a monospace font.</dd>
</dl>
<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/plain">plain</a></code></dt>
 <dd>This class causes the element to be displayed with no border or margin.</dd>
</dl>
<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/small-margin">small-margin</a></code></dt>
 <dd>This class causes the text to be displayed with a smaller margin.</dd>
</dl>
<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/text-link">text-link</a></code></dt>
 <dd>Labels with this class may be focused and the click handler run or the address in the <a href="/en/XUL/Attribute/href" title="en/XUL/Attribute/href">href attribute</a> opened on a mouse click or Enter key press. Labels will appear like a link (blue and underlined).</dd>
</dl>

<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s"> Sujets liés </h3>
<dl><dt> Éléments
</dt><dd> <code><a href="/fr/docs/Mozilla/Tech/XUL/description" title="description">description</a></code>
</dd></dl>
<dl><dt> Attributs
</dt><dd> <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>
</dd></dl>
<dl><dt> Interfaces </dt><dd> <a href="fr/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="fr/NsIDOMXULLabelElement">nsIDOMXULLabelElement</a>
</dd></dl>
<h3 id="Notes_d.27utilisation" name="Notes_d.27utilisation"> Notes d'utilisation </h3>
<p>N'oubliez pas que l'élément label a un attribut « value », contrairement au HTML où les boutons et cases à cocher utilisent label="valeur" comme attribut.
</p>
<pre>&lt;label label="Une légende"/&gt; &lt;-- incorrect --&gt;
&lt;label value="Une légende"/&gt;

&lt;label value="Cliquez sur le bouton"/&gt;
&lt;button label="Un bouton"/&gt;
&lt;checkbox label="Une décision" value="1"/&gt;
</pre>
<div class="noinclude">
</div>