:标签元素 HTML 元素表示用户界面中项目的标题。

¥The HTML element represents a caption for an item in a user interface.

Try it

将 与表单控件（例如 或 ）相关联具有一些主要优点：</p> <p>¥Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:</p> <p>标签文本不仅在视觉上与其相应的文本输入相关联，而且在视觉上也与其相应的文本输入相关联。它也以编程方式与之关联。这意味着，例如，当用户专注于表单输入时，屏幕阅读器将读出标签，从而使辅助技术用户更容易理解应该输入哪些数据。</p> <p>当用户单击或触摸/点击标签时，浏览器会将焦点传递到其关联的输入（也会为输入引发生成的事件）。用于集中输入的增加的点击区域为任何试图激活它的人提供了优势 - 包括那些使用触摸屏设备的人。</p> <p>要将 <label> 元素与 <input> 元素显式关联，首先需要将 id 属性添加到 <input> 元素。接下来，将 for 属性添加到 <label> 元素，其中 for 的值与 <input> 元素中的 id 相同。</p> <p>¥To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.</p> <p>或者，你可以将 <input> 直接嵌套在 <label> 内，在这种情况下，不需要 for 和 id 属性，因为关联是隐式的：</p> <p>¥Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:</p> <p>html<label></p> <p>Do you like peas?</p> <p><input type="checkbox" name="peas" /></p> <p></label></p> <p>标签所标记的表单控件称为标签元素的标记控件。多个标签可以与同一个表单控件关联：</p> <p>¥The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:</p> <p>html<label for="username">Enter your username:</label></p> <p><input id="username" name="username" type="text" /></p> <p><label for="username">Forgot your username?</label></p> <p>可以与 <label> 元素相关联的元素包括 <button>、<input>（type="hidden" 除外）、<meter>、<output>、<progress>、<select> 和 <textarea>。</p> <p>¥Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.</p> <p>属性¥Attributes</p> <p>该元素包括 全局属性。</p> <p>¥This element includes the global attributes.</p> <p>for</p> <p>对于与 <label> 元素位于同一文档中的 labelable 表单相关元素，for 属性的值必须是单个 id。因此，任何给定的 label 元素只能与一个表单控件关联。</p> <p>注意：要以编程方式设置 for 属性，请使用 htmlFor。</p> <p>¥Note: To programmatically set the for attribute, use htmlFor.</p> <p>文档中第一个具有与 for 属性值匹配的 id 属性的元素是该 label 元素的带标签控件 — 如果具有该 id 的元素实际上是 可标记元素。如果它不是可标记元素，则 for 属性无效。如果文档后面还有其他元素也与 id 值匹配，则不会考虑它们。</p> <p>多个 label 元素可以为其 for 属性赋予相同的值；这样做会导致关联的表单控件（for 值引用的表单控件）具有多个标签。</p> <p>注意：<label> 元素可以同时具有 for 属性和包含的控制元素，只要 for 属性指向包含的控制元素即可。</p> <p>¥Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.</p> <p>使用 CSS 设计样式¥Styling with CSS</p> <p><label> 元素没有特殊的样式考虑因素 - 从结构上讲，它们是简单的内联元素，因此可以采用与 <span> 或 <a> 元素大致相同的方式设置样式。你可以按照你想要的任何方式对它们应用样式，只要不导致文本变得难以阅读即可。</p> <p>¥There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.</p> <p>无障碍¥Accessibility</p> <p>互动内容¥Interactive content</p> <p>不要将交互元素（例如 anchors 或 buttons）放置在 label 中。这样做会使人们很难激活与 label 相关的表单输入。</p> <p>¥Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.</p> <p>不要这样做：</p> <p>¥Don't do this:</p> <p>html<label for="tac"></p> <p><input id="tac" type="checkbox" name="terms-and-conditions" /></p> <p>I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a></p> <p></label></p> <p>更喜欢这个：</p> <p>¥Prefer this:</p> <p>html<label for="tac"></p> <p><input id="tac" type="checkbox" name="terms-and-conditions" /></p> <p>I agree to the Terms and Conditions</p> <p></label></p> <p><p></p> <p><a href="terms-and-conditions.html">Read our Terms and Conditions</a></p> <p></p></p> <p>标题¥Headings</p> <p>将 标题元素 放在 <label> 中会干扰多种辅助技术，因为标题通常用作 导航设备。如果需要在视觉上调整标签的文本，请改用应用于 <label> 元素的 CSS 类。</p> <p>¥Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.</p> <p>如果 form 或表单的一部分需要标题，请使用放置在 <fieldset> 中的 <legend> 元素。</p> <p>¥If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.</p> <p>不要这样做：</p> <p>¥Don't do this:</p> <p>html<label for="your-name"></p> <p><h3>Your name</h3></p> <p><input id="your-name" name="your-name" type="text" /></p> <p></label></p> <p>更喜欢这个：</p> <p>¥Prefer this:</p> <p>html<label class="large-label" for="your-name"></p> <p>Your name</p> <p><input id="your-name" name="your-name" type="text" /></p> <p></label></p> <p>按钮¥Buttons</p> <p>具有 type="button" 声明和有效 value 属性的 <input> 元素不需要与其关联的标签。这样做实际上可能会干扰辅助技术解析按钮输入的方式。这同样适用于 <button> 元素。</p> <p>¥An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.</p> <p>示例¥Examples</p> <p>定义隐式标签¥Defining an implicit label</p> <p>html<label>Click me <input type="text" /></label></p> <p>使用 "for" 属性定义显式标签¥Defining an explicit label with the "for" attribute</p> <p>html<label for="username">Click me to focus on the input field</label></p> <p><input type="text" id="username" /></p> <p>技术总结¥Technical summary</p> <p>内容类别</p> <p>流量内容，</p> <p>措辞内容，</p> <p>互动内容，</p> <p>形式关联元素，可触及的内容。</p> <p>允许的内容</p> <p>措辞内容，但没有后代 label 元素。除了标记的对照之外，不允许使用任何</p> <p>labelable 元素。</p> <p>标签遗漏</p> <p>无，开始和结束标记都是强制性的。</p> <p>允许的父级</p> <p>任何接受</p> <p>措辞内容 的元素。</p> <p>隐式 ARIA 角色</p> <p>没有对应的角色</p> <p>允许的 ARIA 角色</p> <p>不允许 role</p> <p>DOM 接口</p> <p>HTMLLabelElement</p> <p>规范SpecificationHTML Standard # the-label-element¥Specifications</p> <p>浏览器兼容性BCD tables only load in the browser</p> <p>¥Browser compatibility</p> </p> </div> <div class="clearfix"></div> <div class="post-share-options"> <div class="post-share-inner d-flex justify-content-between flex-wrap"> </div> </div> <!--End post-details--> <!-- <div id="respond" class="comment-form_outer reply-form-box"> <div class="group-title"> <h3>Leave A Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="#respond" style="display:none;">Cancel reply</a></small></h3> </div> <div class="comment-form"> <form action="http://wp.8887.top/wp-comments-post.php" method="post" id="" novalidate=""> <div class="row clearfix"> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Name*</label><input id="author" name="author" type="text" value="" size="30" maxlength="245" aria-required='true' required='required'> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Email*</label><input id="email" name="email" type="email" value="" size="30" maxlength="100"> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Type Comment here*</label><textarea id="comment" name="comment" rows="7" required="required">