`

Html 中 Lable标签的使用

阅读更多
html中lable 标签的做用与用法 
简单说,<lable></lable> 这对标签有点相当于给form标单的input元素添加了一个感应区

打开google 首页。看看google 的源代码

<input id=all type=radio name=lr value="" checked><label for=all>搜索所有网页</label>
<input id=ch type=radio name=lr value=lang_zh-CN|lang_zh-TW><label for=ch>搜索所有中文网页</label>

就是label 中的标签和radio单选按钮结合起来,以前只能单选按钮可以点击,现在标签点击和单选按钮的点击是一样。

例子1:点击"用户名:"就可以定位光标到输入框
<form>
<label for="username">用户名:</label>
<input type="text" id="username" />
</form>

例子2:点击"用户名:"或按键alt+1,都可以定位光标到输入框
<form>
<label for="username" accesskey="1">用户名:</label>
<input type="text"    id="username" tabindex="1" />
</form>

总结:
FOR属性 
功能:表示Label标签要绑定的 HTML 元素,你点击这个标签的时候,所绑定的元素将获取焦点。 
用法:<Label FOR="username">姓名</Label><input ID="username" type="text"/>

ACCESSKEY属性: 
功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。 
用法:<Label FOR="username" ACCESSKEY="N">姓名</Label><input ID="username" tabindex="N" type="text"/>

局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

tabindex 属性 -- 代表使用"Tab"键的遍历顺序 
可以使用Tab键遍历页面中的所有链接与表单元素,当遍历到某个链接时,按Enter即可进入该链接,相当于鼠标左键点击。遍历时会按照tabindex的大小决定顺序遍历到某个链接的时候,会有虚线框包围链接,这时按回车键即可进入链接的页面。
取值: 数字 (可以是1、2、3、……)


PS:这种用法并不仅仅局限于input元素,其它的也是可以的
分享到:
评论

相关推荐

    html中lable标签的作用

    html中lable标签的作用和几个例子

    html label标签的使用教程

    html label标签的使用教程

    标签球状云特效(3D+Html+Js)

    1.因本文中关键字来自sql数据库的表字段,使用前需配置数据连接参数. 2.多个关键字通过逗号分隔,在读取到的关键字,需根据逗号重新分割后再显示,3D效果还需下载一个js文件, js地址:...

    cytoscape-node-html-label:cytoscape节点的标签。 演示版

    3.0.0使用说明下载库: 通过npm: npm install cytoscape-node-html-label , 通过bower install cytoscape-node-html-label : bower install cytoscape-node-html-label ,或通过直接从存储库(可能是从标签)下载...

    JumbotCMS

    asp+mssql 程序作者:jumbot,随风缘 &lt;br&gt;部分技术解析: 1、创建多层目录 2、保存内容中的远程文件 3、获取远程html&lt;br&gt;4、利用Template模板生成htm静态网页 5、模板支持自定义HtmlLable标签 5...

    Leaflet.label-master.zip

    包含leaflet开发地图所需的框架和插件,比如leaflet.label.js,leaflet.label-src.js,example中可以运行label.html,可修改为加载本地离线的瓦片地图 实现的功能有: 显示标记的矩形框,点,线 移动标记以确认...

    django form和field具体方法和属性说明

    表单输出选项 {{ form.as_table }}:以表格形式加载表单元素 {{ form.as_p }}:以段落形式加载表单元素 {{ form.as_ul }:以列表形式加载表单元素 ...{{ field.html_name }}:字段对应的HTML标签“name”属性的值。

    比翼在线购物系统 v2.0

    + 修改标签插件function.lable_goodclass.php 添加s_max参数,控制二级输出数目,相关后台修改 + 修复添加修改商品生成静态页面出错的bug. + 添加商品浏览历史记录功能 + 增加分类客户端自定义商品展示数目 + 修改...

    bootstrap-floating-label:Bootstrap 5浮动标签

    Bootstrap 5的浮动标签 示例: : 小:少于200行的 适用于Chrome / Chromium,Firefox,Safari和IE 适用于任何字体系列和大小 使用 :warning: Bootstrap 4的最新实现是 尼尔森·诺曼小组(Nielsen Norman ...

    图书管理系统数据库源代码.doc

    //设置标签大小 lable.setText("〈html&gt;().getResourc e("/backImg。jpg")+"'〉&lt;/html〉"); //设置标签文本,设置窗口背景 } } //将标签添加到桌面窗体 DESKTOP_PANE。add(lable,new Integer(Integer。MIN_...

    Python django搭建layui提交表单,表格,图标的实例

    在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将form标签放到一个自定义div内,若要更改其标签颜色只需将内置的背景色CSS类添加到lable标签

    ASP.NET的网页代码模型及生命周期

    语言为.NET网站中使用的语言,如果选择Visual C#,则默认的开发语言为C#,否则为Visual Basic。创建了ASP.NET网站后,系统会自动创建一个代码隐藏页模型页面Default.aspx。ASP.NET网页一般由三部分组成,这三个部分...

    sdcms数据库备份插件v2.0

    plug/collect 为sdcms2.0以上版本采集插件测试演示 plug/lable 为sdcms2.0以上版本标签生成插件测试演示 安装说明: Pulg目录下是插件ASP脚本文件 theme目录下的是插件的html模板显示文件 覆盖到sdcms2.0以上版本...

    sdcms数据库备份插件 v2.0.rar

    plug/backup 为sdcms2.0以上版本...plug/lable 为sdcms2.0以上版本标签生成插件测试演示 安装说明: Pulg目录下是插件ASP脚本文件 theme目录下的是插件的html模板显示文件 覆盖到sdcms2.0以上版本站点中即可安装使用

    零基础学ASP.NET 2.0电子书&源代码绝对完整版1

    4-01.aspx aspx页面中添加一个Lable标签。 4-02.aspx 读出Application的属性值。 4-03.aspx 读出SessionID的值。 4-04.aspx 创建Session对象。 4-05.aspx 读取传递的Session值并显示。 4-...

    sdcms数据库备份插件 v2.0

    plug/backup 为sdcms2.0以上版本数据库备份插件plug/collect 为sdcms2.0以上版本采集插件测试演示plug/lable 为sdcms2.0以上版本标签生成插件测试演示安装说明:Pulg目录下是插件ASP脚本文件theme目录下的是插件的...

    PHP-HTMLhtml重要知识点笔记(必看)

    4.fieldset标签——&gt;legend、lable 5.只能用margin-top、margin-left定位div距离页面边距。 6.padding-top、padding-left定位div里面的元素距离div边距的距离 7.超链接默认是link。可以设置hover的属性,还有visited...

    C#编程经验技巧宝典

    92 &lt;br&gt;0140 如何对计算结果四舍五放入 92 &lt;br&gt;0141 如何将商品金额小写转换成大写 92 &lt;br&gt;0142 如何根据生日自动计算员工年龄 93 &lt;br&gt;0143 如何设置货币值中使用的小数位数 93 &lt;br&gt;0144 ...

    html知识点实践经验总结

    1. 表格标签是table,tr是行,td是单元格,cellspacing是单元格与单元格的距离 cellpadding是内边距,caption是表格的标题 colspan是合并列,rowspan是和并行,表格tbody 都是默认的。如果加多个tdody就可以解决页面...

    云应用开发 ——Google App Engine & Google Web Toolkit入门指南

    4.1 显示文本——Lable,HTML 4.2 方形选择框——CheckBox 4.3 圆形选择框——RadioButton 4.4 按钮——Button 4.5 自定义按钮——PushButton,ToggleButton 4.6 文件上传——FileUpload 4.7 时间选择器——...

Global site tag (gtag.js) - Google Analytics