在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>`标签是网页表单设计中不可或缺的一部分,它主要用于关联一个表单控件,如输入框、复选框或单选按钮等,为用户提供更好的交互体验。`<label>`标签的主要作用在于提高可点击区域,使得用户能够更方便...
Label 标签是 HTML 中的一种基本标签,用于关联表单元素,提供了多种样式和交互方式。下面我们将详细介绍 Label 标签的作用和使用方法。 Label 标签的基本用法 Label 标签的基本用法是使用 `for` 属性来关联表单...
1. 提高可用性:label 标签可以帮助用户更方便地与表单控件进行交互,从而提高了可用性。 2. 降低错误率:通过使用 label 标签,用户可以减少错误的可能性,因为用户可以清楚地看到标签的文本内容。 3. 提高用户体验...
### HTML Label标签的使用教程 #### 一、引言 在HTML中,`<label>`标签是一个非常实用但常被忽视的功能元素。它主要用于改善用户体验,尤其是在与表单交互时。通过合理使用`<label>`标签,我们可以提高网页的可访问...
在HTML中,表单类的标签是构建用户交互界面的关键元素,它们允许用户输入数据并发送到服务器进行处理。本教程将深入讲解这些重要的标签及其用法。 1. `<form>`标签:这是所有表单的容器,定义了用户输入数据的区域...
在HTML中,label标签会包裹一个或多个表单元素,形成一个完整的表单单元。 在上面提供的示例代码中,我们看到了一个带有label标签的表单布局。在这个布局中,"选择课程:"是label标签的文本内容,而select元素是被...
《jQuery表单输入框浮动标签特效的实现与应用》 在网页设计中,表单是收集用户信息的重要工具,而良好的用户体验则是提升用户满意度的关键。jQuery表单输入框浮动标签特效,正是为了优化这一交互过程而诞生的一种...
浮动标签(Floating Label)是一种设计模式,它在用户聚焦输入框时,原本位于输入框上方的标签会浮到输入框内,与用户输入的内容相邻,从而提供清晰的视觉反馈。这种设计在移动设备上特别受欢迎,因为它能节省屏幕...
<label> 标签在网页开发中扮演着至关重要的角色,特别是在构建交互式表单时。它的主要作用是为页面上的表单控件提供一个可点击的文本描述,从而提高用户体验,特别是对那些使用辅助技术(如屏幕阅读器)的用户。下面...
`<label>`元素在HTML中用于定义一个与表单元素关联的标签,`for`属性则用来指定这个标签所对应的表单元素的ID。这种关联不仅提高了可访问性,使得屏幕阅读器用户更容易理解表单元素的功能,还提供了更好的交互体验,...
Struts2框架为了简化表单的处理,提供了一系列丰富的表单标签,这些标签不仅包含了常见的HTML表单元素,还额外提供了许多高级特性。本文将详细介绍Struts2中的表单标签及其使用方法。 #### 二、Struts2表单标签概述...
该特效的核心在于,当用户在输入框中输入时,原本静态的`<label>`标签会动态地浮现在输入框上方,形成一种视觉引导,增强了表单的互动性和易用性。这种效果通常通过JavaScript实现,例如使用jQuery库或者原生的...
HTML表单是网页设计中不可或缺...总之,创建美观且功能齐全的HTML表单需要结合HTML、CSS和JavaScript的知识。通过合理的设计和实现,我们可以提供一个既直观又易于使用的表单,提升用户在网站或应用程序上的交互体验。
总结来说,Bootstrap-float-label是一个强大的CSS库,它为Bootstrap开发者提供了一种优雅的方式,来实现浮动标签效果,从而提升表单的用户体验。无论你是新手还是经验丰富的开发者,都可以轻松地将这一特性整合到你...
在Struts2中,表单标签通常与Action类中的属性相对应,用于在JSP页面上创建HTML表单元素。例如,`<s:textfield>`标签用于创建文本输入框,它与Action类中的String类型属性绑定。以下是基本用法: ```jsp ...
在这个“jquery动态禁用label标签”的主题中,我们将深入探讨如何使用jQuery来实现对HTML `<label>` 标签的动态控制,包括禁用与启用。 HTML `<label>` 标签用于为表单中的输入元素提供一个描述性的文字标签。当...
Bootstrap4表单浮动标签插件是一款专为Bootstrap4框架设计的增强组件,它引入了Material Design的设计理念,为传统的Bootstrap表单提供了独特的交互体验。在Material Design中,表单的占位符(placeholder)不再固定...
可能使用了自定义的`<form>`标签和`<input>`元素,结合`<label>`元素来实现浮动标签效果。 2. **css**目录:这里包含了项目的样式文件。CSS文件可能定义了各种浮动标签的样式,使用了选择器来定位和操作特定的HTML...
在网页设计中,label标签是一个非常重要的元素,它可以帮助用户快速了解表单的内容和结构。但是,普通的label标签通常都是非常简单的,没有太多的美化效果。在这里,我们将演示如何使用CSS代码来美化label标签,提高...
一、HTML表单基础 HTML(HyperText Markup Language)中的`<form>`标签用于定义表单,通过不同的输入元素(如`<input>`, `<select>`, `<textarea>`等)让用户填写信息。例如,创建一个简单的登录表单可以这样写: `...