---
title: <label>
slug: Web/HTML/Element/label
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - Reference
  - Web
translation_of: Web/HTML/Element/label
---
<div>{{HTMLRef}}</div>

<p>L'<em>Element HTML Label</em> (<code><strong>&lt;label&gt;</strong></code>) representa un títol en una interfície d'usuari. Pot estar associat amb un control o bé col·locant l'element de control a l'interior de l'element <code>&lt;label&gt;</code>, o mitjançant l'ús de l'atribut {{htmlattrxref("for")}}. Aquest control es diu el <em>control labeled</em> de l'element etiqueta. Una entrada pot estar associada amb diverses etiquetes.</p>

<p>Val la pena assenyalar, però, que les etiquetes no estan directament associats amb els formularis. S'associen indirectament amb els formularis a través dels controls amb els quals estan associats.</p>

<div class="note">
<p>Abans de la <a href="https://github.com/whatwg/html/pull/1120">revisió de l'especificació HTML</a> realitzada el 28 d'abril de 2016, l'atribut {{htmlattrxref("form")}} de l'element <code>&lt;label&gt;</code> permetía associar directament les etiquetes amb els formularis.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contingut dinàmic</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">contingut interactiu</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">element associat a formulari</a>, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, no té elements d'etiqueta descendent. No es permeten elements etiquetables que no siguin el control labeled.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLLabelElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>L'ID d'un element <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable">etiquetable (labelable)</a> relacionat amb el formulari en el mateix document que l'element d'etiqueta. El primer d'aquests elements en el document amb un ID que coincideixi amb el valor de l'atribut for és el <em>control labeled</em> per a aquest element d'etiqueta.</dd>
 <dd>
 <div class="note">Un element d'etiqueta pot tenir un atribut for i un element de control contingut, sempre que l'atribut <code>for</code> assenyali a l'element de control contingut.</div>
 </dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}</dt>
 <dd>L'element de formulari amb el qual l'etiqueta està associada (el seu propietari de formulari). Si s'especifica, el valor de l'atribut és l'ID d'un element {{HTMLElement("form")}} en el mateix document. Això li permet col·locar elements etiqueta en qualsevol lloc dins d'un document, no només com descendents dels seus elements de formulari.</dd>
 <dd>
 <div class="note">Aquest atribut content va ser <a href="https://github.com/whatwg/html/pull/1120">eliminat de l'especificació HTML</a>, el 28 d'abril de 2016. No obstant això, els scripts segueixen tenint accés a un atribut read-only (sol lectura) {{domxref("HTMLLabelElement.form")}} ; el retorn al formulari del control associat de l'etiqueta és un membre, o null si l'etiqueta no està associada amb un control o el control no és part d'un formulari.</div>
 </dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_etiqueta_senzilla">Exemple etiqueta senzilla</h3>

<pre class="brush: html">&lt;label&gt;Click me &lt;input type="text"&gt;&lt;/label&gt;</pre>

<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p>

<h3 id="Ùs_de_l'attribut_for">Ùs de l'attribut "for"</h3>

<pre class="brush: html">&lt;label for="username"&gt;Click me&lt;/label&gt;
&lt;input type="text" id="username"&gt;</pre>

<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] A partir de Gecko 8.0 {{geckoRelease ("8.0")}}, un esdeveniment clic desencadena la propagació de més d'un <code>&lt;label&gt;</code>, i l'esdeveniment clic sintètic no pot desencadenar <code>&lt;label&gt;</code>s addicionals. En Gecko, un esdeveniment clic encara apareixerà més enllà d'un <code>&lt;label&gt;</code>, mentre que en WebKit o Internet Explorer l'esdeveniment clic s'aturarà en el <code>&lt;label&gt;</code>.  El comportament anterior a Gecko 8.0 (el desencadenament de multiples <code>&lt;label&gt;</code>s) va fer que Firefox deixés de respondre (veure {{bug(646157)}}).</p>

<p>[2] L'especificació d'HTML es va actualitzar a l'abril de 2016 per desaprovar l'atribut {{htmlattrxref("form")}}. Encara està disponible des de script, però la seva definició ha canviat: ara retorna el formulari del control associat, o null si no hi ha un control associat (és a dir, si {{domxref("HTMLLabelElement.control")}} és nul). Veure {{domxref("HTMLLabelElement.form")}}.</p>

<p><span id="result_box" lang="ca"><span>Aquest canvi</span> <span>s'ha implementat</span><span> en</span></span> Firefox 49.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Altres elements relacionats amb formularis: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>