initial commit

1 files changed, 225 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/label/index.html b/files/zh-cn/web/html/element/label/index.html
new file mode 100644
index 0000000000..4c5a35199f
--- /dev/null
+++ b/files/zh-cn/web/html/element/label/index.html
@@ -0,0 +1,225 @@
+---
+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>