label标签的for属性用法

最新推荐文章于 2021-02-24 04:13:04 发布
最新推荐文章于 2021-02-24 04:13:04 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： web前端技术 文章标签： xhtml

会用for属性的人就不要看了

 

<label>标签的for属性格式

<label for=""></label>     

描述：设置或获取给定标签对象指定到的对象。

一般用在输入框，单选框，复选框等地方

注意for的值要与所用控件的Name值对应

用实例来演示，看后就明白了

[xhtml] view plain copy print ?
  1. <html>  
  2. <body>  
  3. <fieldset>  
  4. <legend>item：</legend>  
  5. <form>  
  6. <label for="name">name：</label><input type="text" id="name" />  
  7. <label for="man">男 </label><input type="checkbox" name="man"  id="man"/>  
  8. <label for="woman">女  </label><input type="checkbox" name="woman"  id="woman"/>  
  9. </form>  
  10. </body>  
  11. </html>  

当我们运行后，首先我们单击用户名时就会发现和直接单击输入框一样都可以使光标定位到输入框里

当单击复选框男或者女时效果和我们直接单击复选框打勾的效果一样都可以进行打勾操作

 

这就是for属性的用法，很简单

半生凉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
label标签的for属性
weixin_47282416的博客
02-15 2259
HTml+label标签的for属性
浅析HTML ＜label＞ 标签的 for 属性
孤云博客
01-15 4896
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 一、定义与作用： for属性规定label与哪个表单元素绑定。在点击label 时，会自动将焦点移动到绑定的元素上，比如使用 checkbox或者radio时，如果没有绑定的话，需要鼠标点中小方框才可以选中或不选...
前端笔记-label标签的for属性
IT1995的博客
02-29 8278
这个属性最直观的效果是点击Label后，会聚焦到for指定的地方： 如上，点击姓名，就会聚焦到姓名后面的输入框里面。 源码如下： <html> <head> <title>Label测试</title> </head> <body> <form> <label for="male"&g...
JavaScript动态操作label的for属性
weixin_42275589的博客
05-30 879
JavaScript动态操作label的for属性 一句话解决 使用htmlFor 用例 my_label.htmlFor = input_id; 起因 需求是需要动态添加一个checkbox，涉及到了for，要求是只能用纯JavaScript。一开始很自然的这么写了： const roles__role_label = createNode("label"); roles__role_label.className = "roles__role_label"; roles__role_l
label 中的for属性有什么用
热门推荐
大大大鸡腿的博客
10-27 1万+
label for属性 for属性其实就是将label和表单控件绑定在一起，最主要的差别就是 比如有个输入框，如果我想要选中输入框获得焦点，只有input情况下，我只能选中输入框，但加了label，把label和input绑定在一起后，点击label也可以选中输入框。 不加label用户名: <input type="text" name="" id=""> <br> <label for="text">加了label用户名:</la
Vue用v-for给循环标签自身属性添加属性值的方法
12-29
<Radio v-for='a in radio_arr' label={{a}}> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息：  修改代码如下： 修改内容为 label={{a}} 修改...
label标签使用过程中遇到的问题分析及解决思路
09-28
`label`标签通常与`for`属性一起使用，`for`属性的值应与输入元素的`id`属性相匹配，这样点击`label`时，相应的输入元素就会获得焦点。例如： ```html <label for="username">用户名：</label> ``` 2. **...
label标签是什么意思.docx
11-24
label 标签还可以使用 "for" 属性来将标签绑定到另外一个元素。例如：<label for="male">Male</label>，这里的 "for" 属性的值是 "male"，它将标签绑定到 id 为 "male" 的控件上。这样，当用户点击该标签时，焦点将...
小程序极速实战开发《十一》label标签
03-29
使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：<button/>, , ,   组件用法...
html中 label里for属性和form属性
luckydog
08-09 4463
label：for属性和form属性 2015-12-28 17:19 786人阅读 评论(0) 收藏 举报 分类： HTML5（2） 作者同类文章X 版权声明：本文为博主原创文章，未经博主允许不得转载。 label的for属性 写法一： [java] view plain copy
<label>标签for属性的使用
swallowliyan的专栏
03-24 891
标签for属性的使用 定义和用法 for 属性规定 label 与哪个表单元素绑定。 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。 例： 显式的联系：显式形式将文本 "Social Security Number:" 和表单的社会安全号
jsp页面常用标签
u013759900的专栏
03-06 657
1、前台遍历list标签，window.open方法的使用。                            ' ,'spareapply','width='+window.screen.width*2/3+',height='+window.screen.height*3/5+',left='+window.screen.width/6+',top='+window.screen.
HTML <label> 标签的 for 属性
杂物堆
04-22 6576
for 属性规定 label 与哪个表单元素绑定。隐式和显式的联系 label通常以下面两种方式中的一种来和表单控件相联系： 将表单控件作为标记标签的内容，这样的就是隐式形式， 或者为 label 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。 例如，在 XHTML 中：显式的联系： <label for="SSN">Social Security Number:</label>
label标签加for与不加for属性的区别
weixin_30680385的博客
10-25 942
w3c的标准用法　　 <form>　　<label for="male">Male</label>　　<input type="radio" name="sex" id="male" />　　<br />　　　　　　　　　　　　　　　　　　　　　　　 　　<label for="female">Female</lab...
label标签的for属性要指向input的id属性一致
qq_36235046的博客
12-31 1892
html: <input class="a" id="one" type="text"></input> <div class="a" id="two">eeeeeeee</div> <label for="one">点我试试!!</label> ...
input和label for
qq_39273455的博客
08-02 611
https://www.w3school.com.cn/tags/att_label_for.asp 单label 只是展示，鼠标左键点击 label 中的文字的时候没有任何效果，如果添加了 for 属性，当你点击 label 中的文字的时候，光标会for 属性相应的 id 标签中，图片中的代码，你点击慢跑两个字，id 为『慢跑』的单选框不会被选中，你必须点击单选框才能选中，但是你点击『登山』或...
JS中的lable标签
独酌101112的博客
08-20 2738
label可以说是JS里面控制循环一个使用的语句了，一般搭配continue和break使用，首先来回顾一下这两个语句： continue：立即退出循环后从循环的顶部继续执行。 break：立即退出循环并强制执行后面的语句。 这两个语句可以精确地控制for和while的进行，但是在一些方面却不尽人意，来看一个示例： var n = 10; var m = 10; var num = 0; for(var i=0;i<n;i++){ for(var j=0;j<m;j++){
java label标签_java – 正确使用LabelValueBean
weixin_33238239的博客
02-24 436
我有一个变量：private ArrayList circleNameIdList;在我的Action类中,它的值被填充.我想在JSP的下拉列表中显示标签,当选择一个标签时,circleNameIdList中该特定标签的相应值将传递给服务器.例如：如果标签：NewYork被选中,则它的对应id = 5,被发送到服务器.我怎样才能做到这一点？到目前为止,我在JSP中这样做：但是,它显示不正确.解决方...
label标签的作用及使用
最新发布
09-17
label标签是HTML中的一个标签，用来为表单中的元素提供标签文本。它的作用是给表单元素提供描述和说明，使得用户更容易理解每个表单字段的用途和如何填写。 在使用label标签时，我们可以通过两种方法来关联label和表单元素。一种是使用标签的for属性，给该属性赋值为对应表单元素的id，这样点击label标签时，就会自动关联到对应的表单元素。另一种方法是直接将表单元素放在label标签的内部，这样就不需要为label标签设置for属性。 例如，如果我们有一个文本输入框用于输入用户名，我们可以这样使用label标签： <label for="username">用户名：</label> <input type="text" id="username" name="username"> 或者直接将文本输入框放在label标签内部： <label>用户名：<input type="text" name="username"></label> 无论使用哪种方法，当用户点击label标签时，焦点都会自动转移到对应的表单元素上，提高用户体验。此外，label标签还有助于提升页面的可访问性，使得使用屏幕阅读器的用户能够更好地理解表单元素。 总结来说，label标签的作用是给表单元素提供标签文本，帮助用户理解和填写表单。它的使用方法包括使用for属性关联和放在标签内部两种方式。通过合理使用label标签，我们可以提升用户体验和页面可访问性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值