`

label标签的for属性

阅读更多
label标签通常是写在表单(form)内的,他与一个普通的span最大的不同,就是可以和表单元素配对,比如文本框,单选框,复选框。而配对的方法,就是通过label的for属性。

比如

<input type="text" name="" id="text" /><label for="text">一个label,配文本框</label><br/>  

<input id="User3" type="radio" name="gender" value="3">  

<span for="User3">一个span</span>  

<label for="User3">label配radio</label>
  测试以上代码,你会发现点击“配文本框”的label时,它前面的input:text标签获得焦点了(可输入)!而点击“配radio”时,它前面的单选框radio就被选中了;但点击“一个span”时,单选框不会有什么反应,虽然它们离得更近。

这些只是因为label的for属性。它为label指定了一个目标,一般是一个form表单内元素的ID,这样就可以把这个label与该ID元素关联起来,当点击label时,就可以让该ID也获得焦点!

代码中我也给span加上了for,但没有作用。这就是span与label的区别了。

如果你不想给label加for,但又想把input元素后面的文字和input本身关联起来,那你也可以这样:

<label><input type="checkbox" name="aksd" id="aksd" /> 几个字</label> 
就是用label把input包起来。这样的效果与input后紧跟加for的label效果相同:点击文字即可选中复选框。

同样,把代码中的label换成span就不行了。

注意:label包input的方法,在IE6下无效!

来自于:http://www.cnblogs.com/lixlib/archive/2011/10/19/label-for.html
分享到:
评论

相关推荐

    html中label标签的使用

    3. **事件绑定**:`&lt;label&gt;`标签通过`for`属性绑定事件,当用户点击`&lt;label&gt;`时,事件会传递给关联的表单元素。这对于JavaScript编程非常有用,可以通过监听事件来实现各种动态效果或验证。 4. **样式化**:开发者...

    label标签是什么意思.docx

    例如:&lt;label for="male"&gt;Male&lt;/label&gt;,这里的 "for" 属性的值是 "male",它将标签绑定到 id 为 "male" 的控件上。这样,当用户点击该标签时,焦点将自动转到 id 为 "male" 的控件上。 在实际应用中,label 标签常...

    html中lable标签的作用

    Label 标签还可以使用 `accesskey` 属性来指定热键,例如 `&lt;label for="myid" accesskey="1"&gt;用户名:&lt;/label&gt;&lt;input type="text" id="myid" tabindex="1" /&gt;`,这样用户可以通过按下热键来激活关联的表单元素。...

    Dreamweaver8 标签for属性与对应的id之关系

    `for`属性用于指定`&lt;label&gt;`标签与哪个表单元素关联。它应该包含该表单元素的`id`值。例如,在以下代码片段中: ```html &lt;label for="cn_bruce"&gt;用户名&lt;/label&gt; ``` `for`属性的值`cn_bruce`与`&lt;input&gt;`元素的`id...

    用图片作为label,for属性IE下不起作用

    其中,label标签的for属性允许用户定义一个与表单控件相关联的标签。当用户点击label时,与之相关联的控件将获得焦点。通常,这种关联是通过label的for属性与输入元素的id属性相同值来实现的。 然而,IE(Internet ...

    表单验证及<label for>应用

    `&lt;label&gt;`元素在HTML中用于定义一个与表单元素关联的标签,`for`属性则用来指定这个标签所对应的表单元素的ID。这种关联不仅提高了可访问性,使得屏幕阅读器用户更容易理解表单元素的功能,还提供了更好的交互体验,...

    layui使用label标签的方法

    需要注意的是,在实际开发中,label标签的for属性需要与对应的表单元素的id属性相匹配,这样点击label标签时,就可以触发对应的表单元素的交互,例如选中select中的某个选项。 同时,为了增强用户体验,可以使用...

    html label标签的使用教程

    ### HTML Label标签的使用教程 #### 一、引言 在HTML中,`&lt;label&gt;`标签是一个非常实用但常被忽视的功能元素。它主要用于改善用户体验,尤其是在与表单交互时。通过合理使用`&lt;label&gt;`标签,我们可以提高网页的可访问...

    label标签详情用法demo讲解语法详情.docx

    另一种方式是将表单控件直接嵌入&lt;label&gt;元素内部,这样可以省略`for`属性,因为元素本身就与&lt;label&gt;关联: ```html &lt;label&gt;用户名:&lt;input type="text" id="username" name="username"&gt;&lt;/label&gt; ``` 这种方法在...

    根据标签名字和标签的class属性得到对象

    ### 根据标签名字和标签的class属性得到对象 在Web开发中,经常需要通过JavaScript来操作DOM(Document Object Model)元素。一个常见的需求就是根据指定的标签名和类名来获取页面中的DOM元素。本篇文章将详细介绍...

    delphi调用label matrix

    在Delphi集成开发环境(IDE)中,你可以通过工具箱找到Label控件,将其拖放到表单上,并通过属性面板设置其文本、位置、大小等属性。 要创建一个Label Matrix,我们需要: 1. **确定行列数**:根据需求确定Label...

    Vue用v-for给循环标签自身属性添加属性值的方法

    本文将详细介绍三种在Vue中使用`v-for`给循环标签自身属性添加属性值的方法。 ### 方法一:动态绑定属性 在第一个示例中,我们看到尝试在`&lt;Radio&gt;`标签上设置`label`属性时遇到了问题。原始代码如下: ```html ...

    labelfor:针对IE8和其他旧浏览器中不支持标签的标签输入系统JavaScript修复,不支持将click事件传递给其for输入的标签

    2. **设置标签**:确保你的`&lt;label&gt;`元素有正确的`for`属性,值应等于对应`&lt;input&gt;`元素的`id`属性。例如: ```html &lt;label for="username"&gt;用户名:&lt;/label&gt; ``` 3. **初始化修复**:在`labelfor.js`加载后,...

    微信小程序开发之小程序组件label标签解读以及分析实例

    使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:&lt;button/&gt;, , , 组件用法示例...

    实现label文字以指定长度自动换行

    在大多数GUI库中,`Label`通常有一个`text`属性用于设置显示的文本,而没有提供自动换行的选项。因此,我们需要对文本进行处理,使其能够在宽度有限的空间内适当地换行。 1. **文本处理**:你可以使用字符串操作...

    LabelMatrix条码打印工具

    用户可以添加文本、图像、二维码等元素,自定义字体、颜色、边框等属性,使标签更具个性化和专业性。此外,软件还支持批量打印,用户可以一次性设置多个条码标签并一次性打印出来,大大提高了工作效率。 在实际操作...

    表单标签的title属性加样式(如动态生成时加换行、标红等)

    `title`属性在`&lt;label&gt;`标签中的应用,不仅可以提供额外的提示信息,还可以通过CSS进行样式定制,增强用户体验。本篇将深入探讨如何利用`title`属性添加样式,特别是在动态生成表单时如何实现换行、标红等效果。 ...

    label标签使用过程中遇到的问题分析及解决思路

    `for`属性是连接`label`和其关联控件的关键,例如`&lt;label for="username"&gt;用户名:&lt;/label&gt;`,这里的`for`属性值应与`input`的`id`属性相匹配,如`&lt;input type="text" id="username" name="username"&gt;`。 在描述的...

    通过label标记实现单选框点击文字也能选中

    &lt;label&gt; 标签的 for 属性应当与相关元素的 id 属性相同 实例1: 复制代码代码如下: &lt;label for=”man”&gt; &lt;input type=”radio” value=”男” name=”man” id=”man”/&gt; 男 &lt;/label&gt; &lt;label for=”man2″&gt; &...

Global site tag (gtag.js) - Google Analytics