HTML中Label标签使用

最新推荐文章于 2024-06-20 13:12:21 发布
最新推荐文章于 2024-06-20 13:12:21 发布
阅读量4.5k 收藏 4
点赞数
分类专栏： Java 文章标签： html dreamweaver input div 浏览器 internet

 

<div>  
  <label for="nick">会员名：</label>  
    <div>  
     <input id="nick" type="text"   name="$group.nick.key" value="$! group.nick.value" /></div>  
</div> 
<div>
  <label for="nick">会员名：</label>
    <div>
     <input id="nick" type="text"   name="$group.nick.key" value="$! group.nick.value" /></div>
</div> 

看到上面的代码中有个for属性，以前没怎么注意HTML的细节，今天看到，留意了下，它的作用就是使对应的那个属性的点击域加宽了。可以参考一下代码：

view plaincopy to clipboardprint?
<html> 
<head> 
</head> 
<body> 
<label for="hobby1" onMouseOver='this.style.color="#6381F3"' onMouseOut='this.style.color=""'><input type="checkbox" id="hobby1" name="hobby" value="1"/>music</label> 
<label for="hobby2" onMouseOver='this.style.color="#6381F3"' onMouseOut='this.style.color=""'><input type="checkbox" id="hobby2" name="hobby" value="2"/>dance</label> 
 
</body> 
</html> 

 

 

 

 

在Dreamweaver8中，只要一加入表单或表单对象，文本框等等，就会在代码中加入一个<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 事件。

标签不允许嵌套。

此元素在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。


元素示例代码
下面的例子使用了 LABEL 元素和 ACCESSKEY 属性设置文本框的焦点。

This example uses the LABEL element and the ACCESSKEY attribute to set focus on a text box.

Html代码
  1. <LABEL FOR="oCtrlID" ACCESSKEY="1">  
  2. <!--<SPAN style="text-decoration:underline;">1</SPAN>: Press Alt+1 to set focus to textbox-->  
  3. </LABEL>  
  4. <INPUT TYPE="text" NAME="TXT1" VALUE="binding sample 1"  
  5. SIZE="20" TABINDEX="1" ID="oCtrlID">  
weiling_shen
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html中label标签的用处
m0_38115492的博客
04-29 1592
小编在最初学html的时候对也是存在疑惑，不知到底有什么实际的用途。随着学习深度的增加，慢慢了解其实标签就是为了和表单结合，当点击中的something时就会使浏览器聚焦控件并触发该控件（多用于单选框），下面是一个例子： 请点击文本标记之一，就可以触发相关控件： Male Female 当鼠标点击Male或Fema
HTML lable标签
热门推荐
小葵坤_易安的博客
07-18 2万+
一、HTML < label> 定义与用法 < label> 标签为 input 元素定义标注（标记） label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上 for属性可把 label 绑定到另外一个元素，< label> 标签的 for 属性...
HTML label标签用法
最新发布
2301_78986604的博客
06-20 268
方式优点显式关联1：减少标签嵌套层数2：label标签和表单可以在不同的位置隐式关联1：控件无需定义id2：标签和控件方便作为一个整体控制学习链接：HTML label标签用法介绍-CSDN博客。
html中label使用
qq_34412985的博客
02-01 963
label标签(理解) **目标：** label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。 **概念：** label 标签为 input 元素定义标注（标签）。 **作用：** 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。 **如何绑定元素呢？** 1. 第一种用法就是用label直接包括input表单。 ```h...
HTML - label标签
qq_33962481的博客
05-14 4499
文章目录一、label标签的作用二、使用1.语法 一、label标签的作用 <label>标签用于绑定一个表单元素, 当点击<lable>标签内的文本时, 浏览器就会自动将焦点转到或者选择对应的表单元素上. 二、使用 1.语法 <form action="#" method="POST"> <label for="name">用户名: </label> <input type="text" name="username"
【HTML】label 标签
小秀的博客
08-06 2169
标签用于为表单元素创建标签文本或标题。它可以与输入字段（如文本框、单选按钮、复选框等）和其他表单元素关联起来，以提高可用性和可访问性。这样做的好处是，用户单击标签时，关联的输入字段会自动聚焦（获取焦点），从而提供更好的用户体验。这样做的好处是，单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。标签可以提高表单的可用性、可访问性和用户体验。标签将文本 “用户名：” 与一个文本输入框进行包裹。标签，并根据实际情况选择合适的用法。属性与目标表单元素建立关联。属性的值应与目标元素的。
html label标签的使用教程
10-30
html label标签的使用教程
html中label标签的使用
12-10
在HTML中，我们可以这样使用`<label>`标签： ```html <label>用户名:</label> ``` 在这个例子中，"用户名:"是`<label>`标签的内容，而与之关联的输入框则是通过`for`属性来指定的。`for`属性的值应与相关表单元素...
label标签使用过程中遇到的问题分析及解决思路
12-13
在本问题中，开发者在使用`label`标签时遇到了在不同浏览器上显示异常的问题，特别是在旧版的Internet Explorer (IE6, 7, 8)上。这个问题主要涉及`label`标签的正确使用、JavaScript的兼容性以及DOM操作的注意事项。...
html中select optgroup标签使用介绍
09-28
HTML中的`<select>`元素用于创建下拉列表，而`<optgroup>`标签则是一个非常有用的辅助元素，它允许我们将`<select>`中的选项分组，为用户提供更清晰、更有组织的视图。在处理大量选项时，使用`<optgroup>`可以极大地...
HTML——label标签
Jaylan的博客
05-06 3972
label标签是HTML中的一个标签，用于为表单元素（如文本框、复选框等）提供标签或说明文本。通常与input标签配合使用。label标签可以通过for属性与相应的表单元素建立联系，
html让图片下浮的代码,HTML基础-标签
weixin_36352523的博客
06-04 700
html标签元素在HTML静态页面中，每个网页具有唯一``,即``标签。即网页中的盒子，起分割作用，分割内容使用的常用标签。DIV+CSS更是网页分割常用方法。内容被链接内容br 换行标签p 段落标签H1 H2 H3 H4 H5 H6标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。与都表示加粗em: 强调标签i: 斜体u: 下划线s: 贯穿线hr: 水平线sub: 下标sup: ...
HTML中LABEL标签的用途
静心斋
10-09 1667
 Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。FOR属性   功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。   用法：姓名ACCESSKEY属性：   功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。   用法：姓名局限性：accessKey属性所设置的快捷键不能与浏览器
HTML中label的两种使用方法
Web前端开发——Kingwell's Blog
09-07 736
如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。   有两种使用方法：   方法1：   &lt;label for="userName"&gt;用户名：&lt;/label&gt;&lt;input type="text" id="userName"/&gt;     方法2： &lt;la
CSS3学习笔记（九）——UI元素状态伪类选择器 :checked
Bambi12的博客
12-04 761
通过“:checked”状态来自定义复选框效果 html &lt;form action="#"&gt; &lt;div class="wrapper"&gt; &lt;div class="box"&gt; &lt;input type="radio" checked="checked" id="boy&quo
简单了解html基本标签
qq_64421953的博客
04-29 301
1.HTML文件 使用“！”+“TAB”快速生成头文件代码 2.常见标签 1)注释标签 <!-- 注释 --> 2）标题标签 从h1 ~ h6，数字越大字体越大 <h1>一级标题</h1> 3）段落标签 p标签表示一个段落 <p> 第一段 <p> 4）换行标签 br是一个单标签，不需要结束标志，<br/>是规范写法 <p>第一段 Lorem ipsum dolor sit amet .
HTML表单与label标签的使用
qq_53843555的博客
06-12 1105
HTML表单与label标签的使用
js 为label标签和div标签赋值
rocjiang的专栏
06-06 5937
一、为label标签和div标签赋值： 1. <label id="ttile"></label> document.getElementById('ttile').innerText="????"; 2. <div id="test"></div> document.getElementById('test').inn...
html中label标签
07-27
label标签用于为表单元素提供标签文本。它通常与input元素配合使用，以提高表单的可用性和可访问性。 示例代码： ```html <label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> ``` 在上面的示例中，label标签用于描述输入框的用途。通过将label的for属性与对应的input元素的id属性进行关联，当用户点击label时，浏览器会自动将焦点定位到相应的input元素。这样可以增加表单的可用性，尤其是对于视力受损的用户。 另外，使用label标签还可以通过屏幕阅读器等辅助技术来提供更好的可访问性。屏幕阅读器可以读取label标签的文本，并将其与对应的表单元素关联起来，使得用户可以更容易地理解表单的用途和操作方法。 总结：label标签在HTML中是一个很有用的元素，它可以提高表单的可用性和可访问性。通过与input元素配合使用，可以为用户提供更好的交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值