`

HTML表单里的Label标签

 
阅读更多

HTML表单里的Label标签

在Dreamweaver中,只要一加入表单或表单对象,文本框等等,就会在代码中加入一个<label></label>,一直没明白这个label是做什么的,今天正好看到了解释:

Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 
FOR属性 
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。 
用法:<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY属性: 
功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。 
用法:<Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox" type="text"> 
局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。
 
注释 
要将 LABEL 绑定到其它的控件,请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是,要提交表单,你必须为 LABEL 元素所绑定到的控件指定NAME。 
有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式,可以将该字符包含在 SPAN 中,并设置样式为“text-decoration: underline”。 
如果用户单击 LABEL,则会先触发 LABEL 上的 onclick 事件,然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。 
需要注意的地方: 
1、标签不允许嵌套。 
2、此元素在Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。 
3、此元素是内嵌元素。 
4、此元素需要关闭标签。 
元素示例代码 
下面的例子使用了 LABEL 元素和 ACCESSKEY 属性设置文本框的焦点。 
<LABEL FOR="oCtrlID" ACCESSKEY="1"> 
<SPAN style="text-decoration:underline;">名字</SPAN>: <font color="#999999">按ALT+1到文本框</font> 
</LABEL> 
<INPUT TYPE="text" NAME="TXT1" VALUE="阿会楠" SIZE="20" TABINDEX="1" ID="oCtrlID"> 

分享到:
评论

相关推荐

    利用label标签和CSS美化文件上传表单(不兼容IE6)

    上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。 实现思路通俗易懂: 首先,我们要...

    HTML如何对齐多个表单中的文本框的实现

    表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。 html源代码: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;...

    微信小程序开发之小程序组件label标签解读以及分析实例

    label标签,与html的label标签基本一样。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,就会自动将焦点转...

    小程序极速实战开发《十一》label标签

    label标签,和html的label极其类似。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,就会自动将焦点转到和...

    Combit_List_and_Label_Enterprise_26.0_Multilingual.rar

    net, Visual Studio, c#和…,使用图表,测量工具,表单,标签,条形码,web报告,你可以简单地自己添加所有的,合并文本,变量,和功能,变量通常是通过拖放,旋转文本90度和点添加的。 Combit List and Label ...

    jQuery-Floating-Form-Label:jQuery插件,用于在选择或填写时将输入占位符转换为浮动表单标签

    jQuery浮动表单标签jQuery插件,用于在选中或填写时将输入占位符转换为浮动表单标签。安装包括和jquery.floatingFormLabel.js脚本:&lt; script src =" ...

    HTML_CSS学习笔记.docx

    6.8. &lt;label&gt;标签:为鼠标用户改进可用性 25 6.9. &lt;input&gt; radio/checkbox:单选框、复选框 26 6.10. &lt;select&gt;&标签:创建下拉菜单 27 6.11. &lt;input&gt; submit类型:提交按钮 27 6.12. &lt;input&gt; reset类型:重置表单...

    使用CSS3美化HTML表单的技巧演示

    表单是做网页中很常使用到的元素,但预设的样式都是丑丑的,笔者今天要教各位快速做出自订的单/多选框样式,让您的表单硬是要跟别人不一样。 基本 HTML 就是一个单选框元素加上标签元素: XML/HTML Code复制内容到...

    LabelSlider.js:用于将表单标签转换为用于数字和日期输入的 Photoshop 风格的范围滑块控件的 jQuery 插件

    LabelSlider 为您的网页添加了单击和拖动 HTML 表单标签以调整值的功能和便利性。我如何使用它? 在您的页面上包含 jQuery 1.x、jQuery UI 1.x 和 LabelSlider.js,并将类 label-slider 添加到您的标签中。 &lt; ...

    struts2 标签库 帮助文档

    表单标签:生成HTML页面的from元素 非表单标签:生成页面上的Tab、Tree等 非界面标签又分为数据访问标签和流程控制标签。 控制标签: if/elseif/else标签:控制流程分支。 iteratot标签:对集合属性迭代...

    Bootstrap表单Form全面解析

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、...我们需要将表单元素包裹到form-group类里,一般以”form-group”&gt;…来进行存放,而在它内容表单元素名称一般放在label标签里,而

    HTML表单_动力节点Java学院整理

    HTML表单是一个包含表单元素的区域, 表单使用&lt;form&gt; 标签创建。表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。...

    类似HTML标签语法设置UILabel多样式

    方案三:使用本HYBAttributedLabelCategory开源扩展,直接使用类似HTML标签来解决问题。 样式说明 目前只支持以下属性: font=value : 指定普通字体大小, 如font=18. boldfont=value: 指定加粗字体大小,如boldfont...

    struts2 标签换行

    &lt;s:form action="login2"&gt; &lt;s:textfield label="用户名" name="username"/&gt; &lt;s:password label="密码" name="password"/&gt; &lt;s:submit label="提交"/&gt;我们看着以上的代码跟HTML的差不了多少,但是因为struts2表单默认...

    Bootstrap CSS布局之表单

    1. 表单 表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供...2.把标签label和控件放在一个带有 class .form-group 的 &lt;div&gt; 中。这是获取最佳间距所必需的。因为form-group提供了margin 3

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

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

    多种实例解析HTML表单form的使用方法

    九个简单实例为大家分析了HTML表单form的使用方法,供大家参考,具体内容如下 1 form表单标签 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就...

    前端:表格内容的添加和删除

    实现将输入的信息添加到表格、删除表格内容的功能,适合前端初学者巩固DOM相关知识。涉及全选、反选,几种表单标签的使用。

    详解Bootstrap创建表单的三种格式(一)

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。  Bootstrap表单类型分为三种格式:垂直或基本表单、内联表单、水平表单。 垂直或基本表单(display:block;) 基本的表单结构是 Bootstrap ...

    如何使用Bootstrap创建表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: – 向父 &lt;...

Global site tag (gtag.js) - Google Analytics