Revision 1075686 of <label>

<div>{{HTMLRef}}</div>

<p>The <em>HTML Label Element</em> (<code><strong>&lt;label&gt;</strong></code>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <code>&lt;label&gt;</code> element, or by using the {{htmlattrxref("for")}} attribute. Such a control is called the <em>labeled control</em> of the label element. One input can be associated with multiple&nbsp;labels.</p>

<p>It's worth noting, however, that labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.</p>

<div class="note">
<p>Prior to a revision to the HTML specification made on April 28, 2016, the <code>&lt;label&gt;</code> element's {{htmlattrxref("form")}} attribute allowed directly associating labels with forms.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</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">interactive content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>, but no descendant <code>label</code> elements. No labelable elements other than the labeled control are allowed.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLLabelElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>The ID of a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable">labelable</a> form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the <code>for</code> attribute is the <em>labeled control </em>for this label element.
 <div class="note">A label element can have both a <code>for</code> attribute and a contained control element, as long as the <code>for</code> attribute points to the contained control element.</div>
 </dd>
 <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}} {{obsolete_inline}}</dt>
 <dd>The form element with which the label is associated (its <em>form owner</em>). If specified, the value of the attribute is the ID of a {{HTMLElement("form")}} element in the same document. This lets you place label elements anywhere within a document, not just as descendants of their form elements.
 <div class="note">This content attribute was removed from the HTML specification on April 28, 2016. However, scripts still have access to a read-only {{domxref("HTMLLabelElement.form")}} attribute; it returns the form of which the label's associated control is a member, or <code>null</code> if the label is not associated with a control or the control isn't part of a form.</div>
 </dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="Simple_label_example">Simple label example</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="Using_the_for_attribute">Using the "for" attribute</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="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</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>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</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] Starting with Gecko 8.0 {{geckoRelease("8.0")}}, a bubbling click event triggers at most one <code>&lt;label&gt;</code>, and the synthetic click event cannot trigger additional <code>&lt;label&gt;</code>s. In Gecko, a click event will still bubble up past a <code>&lt;label&gt;</code>, while in WebKit or Internet Explorer the click event will stop at the <code>&lt;label&gt;</code>. The behavior prior to Gecko 8.0 (triggering multiple <code>&lt;label&gt;</code>s) caused Firefox to stop responding (see {{bug(646157)}}).</p>

<p>[2] The HTML specification was updated in April 2016 to deprecate the {{htmlattrxref("form")}} attribute. It's still available from script, but its definition has changed: it now returns the associated control's form, or <code>null</code> if there is no associated control (that is, if {{domxref("HTMLLabelElement.control")}} is <code>null</code>). See {{domxref("HTMLLabelElement.form")}}.</p>

<p>This change is implemented in Firefox 49.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Other form-related elements: {{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>