path: root/files/zh-cn/web/html/element/label/index.html

---
title: <label>
slug: Web/HTML/Element/label
tags:
  - Element
  - Forms
  - HTML
  - HTML forms
  - HTML 表单
  - Reference
  - Web
  - label
  - 参考
  - 标签
  - 表单
translation_of: Web/HTML/Element/label
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;label&gt;</code> 元素（标签）</strong>表示用户界面中某个元素的说明。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>

<p>将一个 <code>&lt;label&gt;</code> 和一个 {{htmlelement("input")}} 元素相关联主要有这些优点：</p>

<ul>
 <li>标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。</li>
 <li>你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。</li>
</ul>

<p>将一个 <code>&lt;label&gt;</code> 和一个 <code>&lt;input&gt;</code> 元素匹配在一起，你需要给 <code>&lt;input&gt;</code> 一个 <code>id</code> 属性。而 <code>&lt;label&gt;</code> 需要一个 <code>for</code> 属性，其值和  <code>&lt;input&gt;</code> 的 <code>id</code> 一样。</p>

<p>另外，你也可以将 <code>&lt;input&gt;</code> 直接放在 <code>&lt;label&gt;</code> 里，此时则不需要 <code>for</code> 和 <code>id</code> 属性，因为关联已隐含存在：</p>

<pre class="brush: html">&lt;label&gt;Do you like peas?
  &lt;input type="checkbox" name="peas"&gt;
&lt;/label&gt;</pre>

<p id="Usage_notes">其他使用事项：</p>

<ul>
 <li>关联标签的表单控件称为这个标签的<em>已关联标签的控件</em>。一个 input 可以与多个标签相关联。</li>
 <li>点击或者轻触（tap）与表单控件相关联的 <code>&lt;label&gt;</code> 也可以触发关联控件的 <code>click</code> 事件。</li>
</ul>

<h2 id="属性">属性</h2>

<p>该元素包含 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>即和 <code>&lt;label&gt;</code> 元素在同一文档中的 <a href="zh-CN/docs/Web/Guide/HTML/Content_categories#Form_labelable">可关联标签的元素</a> 的 {{htmlattrxref("id")}}。 文档中第一个 <code>id</code> 值与 <code>&lt;label&gt;</code> 元素 <code>for</code> 属性值相同的元素，如果可关联标签（labelable），则为<em>已关联标签的控件</em>，其标签就是这个 <code>&lt;label&gt;</code> 元素。如果这个元素不可关联标签，则 <code>for</code> 属性没有效果。如果文档中还有其他元素的 <code>id</code> 值也和 <code>for</code> 属性相同，<code>for</code> 属性对这些元素也没有影响。
 <div class="note"><strong>注意：</strong><code>&lt;label&gt;</code> 元素可同时有一个 <code>for</code> 属性和一个子代控件元素，只是 <code>for</code> 属性需要指向这个控件元素。</div>
 </dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>表示与 label 元素关联的 {{htmlelement("form")}} 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 {{HTMLElement("form")}} 元素的 <code>id</code>。因此你可以将 label 元素放在文档的任何位置，而不仅作为 {{HTMLElement("form")}} 元素的后代。</dd>
</dl>

<h2 id="使用_CSS_样式">使用 CSS 样式</h2>

<p><code>&lt;label&gt;</code> 元素没有特别的样式考虑——结构上，<code>&lt;label&gt;</code> 是简单的行内元素，所以可使用和 {{htmlelement("span")}} 或 {{htmlelement("a")}} 元素大致相同的方式来应用样式。你也可以任意方式为 <code>&lt;label&gt;</code> 应用样式，只是不要让文本难以阅读。</p>

<h2 id="示例">示例</h2>

<h3 id="简单的label">简单的 label</h3>

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

<p>{{EmbedLiveSample('简单的 label', '200', '50', '')}}</p>

<h3 id="使用_for_属性">使用 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('使用_for_属性', '200', '50', '')}}</p>

<h2 id="可访问性问题">可访问性问题</h2>

<h3 id="交互内容">交互内容</h3>

<p>不要在 <code>label</code> 元素内部放置可交互的元素，比如 {{HTMLElement("a", "anchors")}} 或 {{HTMLElement("button", "buttons")}}。这样做会让用户更难激活/触发与 <code>label</code> 相关联的表单输入元素。</p>

<h4 id="Dont">Don't</h4>

<pre class="brush: html example-bad">&lt;label for="tac"&gt;
  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
  I agree to the &lt;a href="terms-and-conditions.html"&gt;Terms and Conditions&lt;/a&gt;
&lt;/label&gt;
</pre>

<h4 id="Do">Do</h4>

<pre class="brush: html example-good">&lt;label for="tac"&gt;
  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
  I agree to the Terms and Conditions
&lt;/label&gt;
&lt;p&gt;
  &lt;a href="terms-and-conditions.html"&gt;Read our Terms and Conditions&lt;/a&gt;
&lt;/p&gt;
</pre>

<h3 id="标题">标题</h3>

<p>在一个 <code>&lt;label&gt;</code> 元素内部放置标题元素（<a href="/en-US/docs/Web/HTML/Element/Heading_Elements">heading elements</a>）会干扰许多辅助技术，原因是标题通常被用于辅助导航（<a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">a navigation aid</a>）。若标签内的文本需要做视觉上的调整，应该使用适用于 <code>&lt;label&gt;</code> 元素的 CSS 类。</p>

<p>若一个 <a href="/en-US/docs/Web/HTML/Element/form">表单</a>，或表单中的一部分需要一个标题，应使用 {{HTMLElement("legend")}} 元素置于 {{HTMLElement("fieldset")}} 元素中。</p>

<h4 id="Dont_2">Don't</h4>

<pre class="brush: html example-bad">&lt;label for="your-name"&gt;
  &lt;h3&gt;Your name&lt;/h3&gt;
  &lt;input id="your-name" name="your-name" type="text"&gt;
&lt;/label&gt;
</pre>

<h4 id="Do_2">Do</h4>

<pre class="brush: html example-good">&lt;label class="large-label" for="your-name"&gt;
  Your name
  &lt;input id="your-name" name="your-name" type="text"&gt;
&lt;/label&gt; </pre>

<h3 id="按钮">按钮</h3>

<p>若 {{HTMLElement("input")}} 元素声明了 <code>type="button"</code> 和有效的 <code>value</code> 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。{{HTMLElement("button")}} 元素也一样。</p>

<h2 id="技术概览">技术概览</h2>

<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 parents</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">Implicit ARIA role</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>No <code>role</code> permitted</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLLabelElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</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', 'sec-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></td>
  </tr>
  <tr>
   <td><a href="https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1" hreflang="en" lang="en" rel="noopener">HTML 4.0 Specification<br>
    <small lang="en-US">The definition of '&lt;label&gt;' in that specification.</small></a></td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("html.elements.label")}}</p>

<h2 id="参见">参见</h2>

<p>其他表单相关的元素：</p>

<ul>
 <li>{{HTMLElement("form")}}</li>
 <li>{{HTMLElement("input")}}</li>
 <li>{{HTMLElement("button")}}</li>
 <li>{{HTMLElement("datalist")}}</li>
 <li>{{HTMLElement("legend")}}</li>
 <li>{{HTMLElement("select")}}</li>
 <li>{{HTMLElement("optgroup")}}</li>
 <li>{{HTMLElement("option")}}</li>
 <li>{{HTMLElement("textarea")}}</li>
 <li>{{HTMLElement("keygen")}}</li>
 <li>{{HTMLElement("fieldset")}}</li>
 <li>{{HTMLElement("output")}}</li>
 <li>{{HTMLElement("progress")}}</li>
 <li>{{HTMLElement("meter")}}</li>
</ul>