• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5中label标签对input元素标注的使用方法

HTML5中label标签对input元素标注的使用方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-12-27

本文主要包含html,input,label等相关知识,希望在学习及工作中可以帮助到您

HTML <label> 标签:W3C标准

定义:

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

用法:

 

        <label> 标签的 for 属性应当与相关元素的 id 属性相同。

        开发为了增强用户体验,涉及 input 元素中的 checkbox、radio等属性时,常用 label 标签来标注,使之点击到文字也能选中相应的单选、复选框等。

使用示例如下:

<input type="radio" name="demo" />单选1 <input type="radio" name="demo" />单选2 <input type="radio" name="demo" />单选3 <input type="radio" name="demo" />单选4 <input type="radio" name="demo" />单选5        我们只有点击相应的圈圈才能选中,体验很不好。 <input type="radio" name="demo" id="temp1" /><label for="temp1">单选1</label> <input type="radio" name="demo" id="temp2" /><label for="temp2">单选2</label> <input type="radio" name="demo" id="temp3" /><label for="temp3">单选3</label> <input type="radio" name="demo" id="temp4" /><label for="temp4">单选4</label> <input type="radio" name="demo" id="temp5" /><label for="temp5">单选5</label>        我们给 input 框设置相应的 id ,label 标签的 for 属性必须对应相应的id。这样当我们点击相应的文字时也是可以被选中的,所以这样的 input 框大大增加了用户体验性。 <label><input type="radio" name="demo" />单选1</label> <label><input type="radio" name="demo" />单选2</label> <label><input type="radio" name="demo" />单选3</label> <label><input type="radio" name="demo" />单选4</label> <label><input type="radio" name="demo" />单选5</label>        为了开发效率我们可以使用第3种,以嵌套的方式来使用,这样我们不用为设置 id 名字而发愁,也不用设置 label 标签中的 for 属性了。


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5 Web Workers
  • 2018-12-03html5 Canvas绘制线条 closePath()实例代码 _html5教程技巧
  • 2018-12-03Vue.directive()的图文详解
  • 2018-12-03HTML5学习笔记之html5与传统html区别 _html5教程技巧
  • 2018-12-03移动端HTML5性能优化
  • 2018-12-03苹果官网设计翻转特效如何实现?
  • 2018-12-03HTML文件HEAD内部标记浅析
  • 2018-12-03h5的新增标签和废弃标签
  • 2018-12-03JS每日一题-小demo之JS实现通过键盘方向键操作图片上下左右无缝切换
  • 2017-08-06HTML5的结构和语义(2):结构

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • svg如何实现坐标系统变换(附代码)
    • html5指南(4)-使用Geolocation的详解
    • HTML块级标签汇总(小篇)
    • 用HTML5制作一个简单的弹力球游戏
    • 前端开发工程师在技术上如何专注和沉淀?
    • HTML4和HTML5之间的10个主要不同
    • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例_html5教程技巧
    • phonegap如何实现创建联系人的方法分析
    • 实现HTML5拖拽的示例代码
    • 分享h5 canvas圆圈进度条的实例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有