详细介绍HTML中的label标签

2022-07-23 0 907
label标签介绍label标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性,可以关联特定的表单控件。

 

label标签和特定表单元素关联方式

label标签的关联方式主要有两种,显示关联隐式关联

方式1:显式关联

显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name。如:

爱好:    

效果图:

显示关联和隐式关联的优缺点:

显式关联优点:

  1. 可以减少标签嵌套层数
  2. label标签和表单可以在不同的位置

显示关联缺点:

  1. 控件需要定义id属性
  2. label标签和表单控件不利于作为一个整体来控制

隐式关联优点:

  1. 控件无需定义id
  2. 标签和控件方便作为一个整体控制

隐式关联缺点:

  1. 增加了标签嵌套层数
  2. 不能将标签和关联控件放到不同的位置

以上是个人对两种方式的看法,使用时可按需要选择显示或隐式。

label标签的浏览器支持及可关联的表单元素

所有主流浏览器都支持label标签。Safari 2 或更早的版本不支持label标签。

能使用显示关联的表单元素有:

  • input type="text" 文本框,点击标签时关联的文本框获得焦点。
  • input type="checkbox" 复选框,点击标签时选中或取消选中复选框。
  • input type="radio" 单选框,点击标签时选中单选框。
  • input type="file" 文件上传,点击标签时打开文件选择对话框。
  • input type="password" 密码框,点击标签时密码框获得焦点。
  • textarea 文本域,点击标签时文本域获得焦点。
  • select 下拉框,点击标签时,下拉框获得焦点,不过并不展开下拉框选项。

label标签的form属性

form 属性指定label标签元素所属的表单。如下,虽然label标签在myform表单外,但仍属于myform表单。如下:

1
<input type="radio" name="sex" id="male" value="male"> <br> <label for="female">女</label> <input type="submit" value="提交"><label for="male" form="myform">男</label>

效果图如下,点击”男”同样可以选中第一个单选框

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 技术新知 详细介绍HTML中的label标签 https://www.lingchenw.cn/jishu/2436.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载