`

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 中 Label 标签的作用 Label 标签是 HTML 中的一种基本标签,用于关联表单元素,提供了多种样式和交互方式。下面我们将详细介绍 Label 标签的作用和使用方法。 Label 标签的基本用法 Label 标签的基本用法是...

    html label标签的使用教程

    - `&lt;label&gt;`标签只能在HTML文档中使用,且必须在Internet Explorer 4.0及更高版本中可用。 - `&lt;label&gt;`标签是内嵌元素,这意味着它不能包含块级元素。 - 使用`&lt;label&gt;`时,必须提供一个关闭标签。 #### 五、示例...

    Lable 多行显示

    在HTML中,可以使用` `标签来插入换行符。 - 对于Python的Tkinter库,可以设置`wraplength`参数,使文本在指定长度后自动换行。 2. **颜色设置** - 改变Label的颜色通常涉及到文本颜色和背景颜色。在大多数...

    Label的ToolTip属性,或是a标签的提示换行问题

    在a标签中实现换行 在HTML中,`a` 标签用于创建超链接。默认情况下,`a` 标签内的文本是不允许自动换行的,这可能会导致布局上的问题,尤其是在文本过长的情况下。为了允许换行,可以使用CSS的 `white-space` 属性...

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

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

    layui使用label标签的方法

    2. 在HTML中使用label标签,并赋予其"layui-form-label"类名。 3. 将label标签与表单元素(如input、select)相关联。 4. 使用"lay-verify"等属性实现表单验证。 5. 利用Ajax技术动态加载数据到表单元素中。 6. 使用...

    使用Lable控件输出九九乘法表

    使用Lable控件输出九九乘法表是.NET编程中的一项基础任务,常用于教学和入门级的Web应用程序开发。在*** Web Forms应用中,我们通常会使用Label控件来显示文本信息。Label控件是***提供的一个基本服务器控件,它可以...

    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 ,或通过直接从存储库(可能是从标签)下载...

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

    在这个问题中,尝试使用这两个属性来显示错误信息,但由于`lable`标签的错误,IE6, 7, 8的JavaScript引擎无法识别,从而引发运行时错误。 5. **错误排查与解决**: 解决此问题的关键在于仔细检查HTML代码,确保...

    可以拖动的控件(标签)

    在提供的压缩包文件"可拖动的LABLE"中,可能包含了一个示例代码或者项目,展示了如何在特定环境下实现这个功能。通过学习和理解这个示例,初学者可以更直观地了解拖动控件的实现步骤。 总的来说,创建可拖动的标签...

    最常用的HTML转义字符 Escape Sequence

    当浏览器在HTML文档中遇到这些转义字符时,会将它们转换成对应的特殊符号,而不是将它们作为HTML标签的一部分来处理。 HTML转义字符的格式由三个部分组成: 1. 一个和号(&):这是转义序列的开始,用来告诉浏览器...

    JumbotCMS

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

    vue select 获取value和lable操作

    本文将详细介绍如何在Vue中使用`&lt;Select&gt;`组件来获取选定选项的`value`(值)和`label`(标签文本)。在实际应用中,我们可能需要同时获取选项的唯一标识(例如ID)和其对应的描述(例如名称),以便于后续的数据...

    ASP.NET Lable中进行换行解决方案

    比如,可以将换行符替换为"|", 然后再将这个特定的字符串替换为HTML中的换行标签" "。示例代码如下: ```vb Dim strTextArea As String = Replace(TextArea1.Value, vbCrLf, "|") ``` 上述代码表示获取文本框中...

    html前端必须掌握的单词

    - **align**: 对齐方式,虽然 HTML5 已不再推荐直接在标签中使用该属性,但在 CSS 中仍广泛应用。 - **author**: 作者信息,可以放在 `作者名"&gt;` 中,用于描述文档的作者。 - **iframe**: 内嵌框架,允许在当前页面...

    Java编程swing组件JLabel详解以及使用示例

    JLabel 对象可以通过设置垂直和水平对齐方式,指定标签显示区中标签内容在何处对齐。默认情况下,标签在其显示区内垂直居中对齐。默认情况下,只显示文本的标签是开始边对齐;而只显示图像的标签则水平居中对齐。 ...

    表单label美化代码

    在上面的代码中,我们使用了背景图片来美化label标签,我们还使用了边框样式和字体样式来美化label标签的外观。 美化label标签的效果 通过使用上面的CSS代码,我们可以美化label标签,提高网页的视觉效果。下面是...

    Leaflet.label-master.zip

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

    JavaScript.教学

    在HTML文档中,JavaScript可以插入到多个位置,如`&lt;script&gt;`标签内或者事件属性中,这使得HTML和JavaScript紧密集成,能够实时响应用户的操作。 在上述示例中,展示了JavaScript如何与HTML元素交互。例如,代码展示...

Global site tag (gtag.js) - Google Analytics