`

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"> 

分享到:
评论

相关推荐

    html中label标签的使用

    HTML中的`&lt;label&gt;`标签是网页表单设计中不可或缺的一部分,它主要用于关联一个表单控件,如输入框、复选框或单选按钮等,为用户提供更好的交互体验。`&lt;label&gt;`标签的主要作用在于提高可点击区域,使得用户能够更方便...

    html中lable标签的作用

    Label 标签是 HTML 中的一种基本标签,用于关联表单元素,提供了多种样式和交互方式。下面我们将详细介绍 Label 标签的作用和使用方法。 Label 标签的基本用法 Label 标签的基本用法是使用 `for` 属性来关联表单...

    label标签是什么意思.docx

    1. 提高可用性:label 标签可以帮助用户更方便地与表单控件进行交互,从而提高了可用性。 2. 降低错误率:通过使用 label 标签,用户可以减少错误的可能性,因为用户可以清楚地看到标签的文本内容。 3. 提高用户体验...

    html label标签的使用教程

    ### HTML Label标签的使用教程 #### 一、引言 在HTML中,`&lt;label&gt;`标签是一个非常实用但常被忽视的功能元素。它主要用于改善用户体验,尤其是在与表单交互时。通过合理使用`&lt;label&gt;`标签,我们可以提高网页的可访问...

    头歌教学实践平台 Web前端开发基础 HTML-表单类的标签

    在HTML中,表单类的标签是构建用户交互界面的关键元素,它们允许用户输入数据并发送到服务器进行处理。本教程将深入讲解这些重要的标签及其用法。 1. `&lt;form&gt;`标签:这是所有表单的容器,定义了用户输入数据的区域...

    layui使用label标签的方法

    在HTML中,label标签会包裹一个或多个表单元素,形成一个完整的表单单元。 在上面提供的示例代码中,我们看到了一个带有label标签的表单布局。在这个布局中,"选择课程:"是label标签的文本内容,而select元素是被...

    jQuery表单输入框浮动标签特效.zip

    《jQuery表单输入框浮动标签特效的实现与应用》 在网页设计中,表单是收集用户信息的重要工具,而良好的用户体验则是提升用户满意度的关键。jQuery表单输入框浮动标签特效,正是为了优化这一交互过程而诞生的一种...

    简单实用的jQuery表单输入框浮动标签动画特效插件

    浮动标签(Floating Label)是一种设计模式,它在用户聚焦输入框时,原本位于输入框上方的标签会浮到输入框内,与用户输入的内容相邻,从而提供清晰的视觉反馈。这种设计在移动设备上特别受欢迎,因为它能节省屏幕...

    label标签详情用法demo讲解语法详情.docx

    &lt;label&gt; 标签在网页开发中扮演着至关重要的角色,特别是在构建交互式表单时。它的主要作用是为页面上的表单控件提供一个可点击的文本描述,从而提高用户体验,特别是对那些使用辅助技术(如屏幕阅读器)的用户。下面...

    表单验证及<label for>应用

    `&lt;label&gt;`元素在HTML中用于定义一个与表单元素关联的标签,`for`属性则用来指定这个标签所对应的表单元素的ID。这种关联不仅提高了可访问性,使得屏幕阅读器用户更容易理解表单元素的功能,还提供了更好的交互体验,...

    Struts2_表单标签简介 示例

    Struts2框架为了简化表单的处理,提供了一系列丰富的表单标签,这些标签不仅包含了常见的HTML表单元素,还额外提供了许多高级特性。本文将详细介绍Struts2中的表单标签及其使用方法。 #### 二、Struts2表单标签概述...

    HTML5 SVG表单浮动标签特效.zip

    该特效的核心在于,当用户在输入框中输入时,原本静态的`&lt;label&gt;`标签会动态地浮现在输入框上方,形成一种视觉引导,增强了表单的互动性和易用性。这种效果通常通过JavaScript实现,例如使用jQuery库或者原生的...

    美观又功能齐全的HTML form表单

    HTML表单是网页设计中不可或缺...总之,创建美观且功能齐全的HTML表单需要结合HTML、CSS和JavaScript的知识。通过合理的设计和实现,我们可以提供一个既直观又易于使用的表单,提升用户在网站或应用程序上的交互体验。

    基于Bootstrap的表单浮动标签

    总结来说,Bootstrap-float-label是一个强大的CSS库,它为Bootstrap开发者提供了一种优雅的方式,来实现浮动标签效果,从而提升表单的用户体验。无论你是新手还是经验丰富的开发者,都可以轻松地将这一特性整合到你...

    Struts2表单标签使用范例

    在Struts2中,表单标签通常与Action类中的属性相对应,用于在JSP页面上创建HTML表单元素。例如,`&lt;s:textfield&gt;`标签用于创建文本输入框,它与Action类中的String类型属性绑定。以下是基本用法: ```jsp ...

    jquery动态禁用label标签.zip

    在这个“jquery动态禁用label标签”的主题中,我们将深入探讨如何使用jQuery来实现对HTML `&lt;label&gt;` 标签的动态控制,包括禁用与启用。 HTML `&lt;label&gt;` 标签用于为表单中的输入元素提供一个描述性的文字标签。当...

    Bootstrap4表单浮动标签插件

    Bootstrap4表单浮动标签插件是一款专为Bootstrap4框架设计的增强组件,它引入了Material Design的设计理念,为传统的Bootstrap表单提供了独特的交互体验。在Material Design中,表单的占位符(placeholder)不再固定...

    HTML5+CSS3实现的表单浮动标签特效源码

    可能使用了自定义的`&lt;form&gt;`标签和`&lt;input&gt;`元素,结合`&lt;label&gt;`元素来实现浮动标签效果。 2. **css**目录:这里包含了项目的样式文件。CSS文件可能定义了各种浮动标签的样式,使用了选择器来定位和操作特定的HTML...

    表单label美化代码

    在网页设计中,label标签是一个非常重要的元素,它可以帮助用户快速了解表单的内容和结构。但是,普通的label标签通常都是非常简单的,没有太多的美化效果。在这里,我们将演示如何使用CSS代码来美化label标签,提高...

    html css表单下载

    一、HTML表单基础 HTML(HyperText Markup Language)中的`&lt;form&gt;`标签用于定义表单,通过不同的输入元素(如`&lt;input&gt;`, `&lt;select&gt;`, `&lt;textarea&gt;`等)让用户填写信息。例如,创建一个简单的登录表单可以这样写: `...

Global site tag (gtag.js) - Google Analytics