• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <label>

    HTML <label>元素(标签)表示用户界面中某个元素的说明。

    浏览器支持

    目前大多数浏览器支持<label>标签。

    示例

    <label for="username">click me</label>
    <input type="text" id="username">
    

    标签定义及使用说明

    • <label>标签为 input 元素定义标注(标记)。
    • <label>元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在<label>元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    • for属性可把 label 绑定到另外一个元素。请把for属性的值设置为相关元素的id属性的值。

    将一个<label>和一个<input>元素放在一起会有以下几点好处:

    • 标签文本不仅与其相应的文本输入在视觉上相关联;它也以编程方式与它相关联。这意味着,当用户点击到表单输入时,屏幕阅读器可以读出标签,使在使用辅助技术的用户更容易理解应输入哪些数据.
    • 你可以单击关联的标签来聚焦或者激活 input,以及 input 本身。这种增加的命中区域为激活 input 提供了方便,包括那些使用触摸屏设备的。

    想要将一个<label>和一个<input>元素匹配在一起,你需要给<input>一个id属性。而<label>需要一个for属性,其值和 input 的id一样。

    另外,你也可以将<input>直接放在<label>里,这种情况就不需要forid属性了,因为这时关联是隐含的:

    <label>do you like peas?
      <input type="checkbox" name="peas">
    </label>

    其他使用事项:

    • 标签标记的表单控件称为标签元素的标签控件。一个 input 可以与多个标签相关联。
    • 标签本身并不与表单直接相关。它们只通过与它们相关联的控件间接地与表单相关联。
    • 当点击或者触碰(tap)一个与表单控件相关联的<label>时,关联的控件的click事件也会触发。

    属性

    该元素包含全局属性.

    • for可标记的 form 相关元素的id,在同一文档中作为label元素。第一个这样的元素在文档中有一个ID匹配属性值,作为这个label元素的labeled control
      注意:label元素可同时有属性和包含控件元素(contained control element),只要此属性指向包含控件元素。
    • form表示label元素关联的form元素(它的表单拥有者)。此属性值必须是同一文档中<form>元素的ID。如果未指定此属性值,<label>元素必须是<form>元素的后代。应用此属性值,你可以将label元素放置在文档的任何位置,而不仅仅是作为它的拥有者<form>元素的后代。
    属性描述
    forelement_id规定 label 与哪个表单元素绑定。
    form HTML5新增form_id规定 label 字段所属的一个或多个表单。

    Technical summary

    Content categories流式内容元素,段落内容元素,交互内容元素,form-associated element,段落内容元素.
    Permitted content段落内容元素, but no descendantlabelelements. No labelable elements other than the labeled control are allowed.
    Tag omission不允许,开始标签和结束标签都不能省略。
    Permitted parents可接受的任何元素段落内容元素.
    Permitted ARIA rolesNone
    DOM接口HTMLLabelElement

    HTML 4.01 与 HTML 5 之间的差异

    "form"属性是 HTML5 的新属性。

    全局属性

    <label>标签支持全局属性,查看完整属性表HTML全局属性。

    事件属性

    <label>标签支持所有HTML事件属性。

    实例

    带有两个输入字段和相关标记的简单 HTML 表单:

    <form action="demo_form.asp">
    <label for="male">male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">female</label>
    <input type="radio" name="sex" id="female" value="female"><br>
    <input type="submit" value="submit">
    </form>

    可访问性问题

    相互影响的内容

    不要在label元素内部放置会相互影响的元素,比如anchors,或者buttons。这样做会让用户更难激活/触发与label相关联的表单元素input

    Don't

    <label for="tac">
      <input id="tac" type="checkbox" name="terms-and-conditions">
      i agree to the <a href="terms-and-conditions">terms and conditions</a>
    </label>
    

    Do

    <label for="tac">
      <input id="tac" type="checkbox" name="terms-and-conditions">
      i agree to the terms and conditions
    </label>
    <p>
      <a href="terms-and-conditions">read our terms and conditions</a>
    </p>
    

    标题

    在一个<label>元素内部放置标题元素(heading elements)会干扰许多辅助技术,原因是标题通常被当成一个导航助手(a navigation aid)。若标签内的文本需要在视觉上做些调整,应该使用CSS伪类更改样式并应用到<label>元素中。

    若一个form元素,或者form元素中的一部分需要一个标题,此时应该使用<legend>元素做标题,并将它放在<fieldset>元素中。

    Don't

    <label for="your-name">
      <h3>your name</h3>
      <input id="your-name" name="your-name" type="text">
    </label>
    

    Do

    <label class="large-label" for="your-name">
      your name
      <input id="your-name" name="your-name" type="text">
    </label> 

    Buttons

    <input>元素若有着type="button"的宣告和有效的value属性,则不需要添加label.若添加了,则可能会干扰辅助技术如何解析button input.<button>元素也同样。

    上篇:<input>

    下篇:<legend>