Html中Label标记的作用和使用介绍

Label标识有两个属性,一个是FOR,一个是ACCESSKEY

FOR的意思是,这个Lable是为哪个控件服务的;
ACCESSKEY则定义了访问这个控件的热键。
比如,有一个名字叫Name的文本框,<INPUT TYPE="TEXT" ID="Name" SIZE=30>,
那么,<label>就可以定义成:<LABEL FOR="Name" ACCESSKEY="N">姓  名(<U>N</U>):</LABEL>。
可以看见,这个<Label>是为那个ID为“Name”控件服务的,而ACESSKEY则定义了,这访问这个控件的热键为“Alt+N”。

 1 < LABEL  FOR ="txtName"  ACCESSKEY ="N" > 姓  名( < U > N </ U > ): </ LABEL >
 2 < INPUT  TYPE ="TEXT"  ID ="txtName"  SIZE =30 > Meil < br >
 3
 4 < LABEL  FOR ="txtUrl"  ACCESSKEY ="U" > 个人主页( < U > U </ U > ): </ LABEL >
 5 < INPUT  TYPE ="TEXT"  ID ="txtUrl"  SIZE =30 > http://www.livebaby.cn < br >
 6
 7 < LABEL  FOR ="txtPhonebox"  ACCESSKEY ="P" > 联系电话( < U > P </ U > ): </ LABEL >
 8 < INPUT  TYPE ="TEXT"  ID ="txtPhonebox"  SIZE =30 >   < br >
 9
10 < LABEL  FOR ="areabox"  ACCESSKEY ="S"   > 留  言( < U > S </ U > ): </ LABEL >
11 < TEXTAREA  ID ="areabox"  COLS ="30"  ROWS ="3" ></ TEXTAREA >  


  单选钮、复选框都要点击控件才能选中控件,而如果使用<label>标识就可以实现点击文字选取。

点击文字可以选取的多项选择框:

1 < input  type ="CHECKBOX"  id ="chk1"  value ="often"  name ="chkoften" >
2 < label  for ="chk1"   > 经常来这里 </ label >  
3 < input  type ="CHECKBOX"  id ="chk2"  value ="seldom"  name ="chkseldom" >
4 < label  for ="chk2"   > 偶尔来看看 </ label >  

带热键的多项选择框:
1 < input  type ="CHECKBOX"  id ="chk3"  value ="often"  name ="chkoften" >
2 < label  for ="chk3"  ACCESSKEY ="H" > 经常来这里( < U > H </ U > </ label >  
3 < input  type ="CHECKBOX"  id ="chk4"  value ="seldom"  name ="chkseldom" >
4 < label  for ="chk4"  ACCESSKEY ="L" > 偶尔来看看( < U > L </ U > </ label >

原文: http://www.livebaby.cn/study/Developer/HTML_CSS/2008/1/Html_Lable_415382424.html
### HTML 中 `<label>` 标签的用法 `<label>` 标签用于定义表单控件的标注,它能够提高用户体验并增强无障碍功能。通过将 `<label>` 相应的表单元素绑定在一起,用户点击 `<label>` 文本时可以直接激活对应的表单控件。 #### 正确使用 `<label>` 的方法 为了使 `<label>` 能够与特定的表单元素关联起来,通常会在 `<label>` 上设置 `for` 属性,并将其值设为对应表单元素的 `id` 值[^1]。这种方式明确了两者之间的关系,从而提升了交互性可用性。 下面是一段标准代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Label 示例</title> </head> <body> <label for="email">电子邮箱:</label> <input type="email" id="email" name="email"> </body> </html> ``` 在此例子中,`<label>` 的 `for` 属性被设定为 `"email"`,而该名称正好匹配了 `<input>` 元素的 `id` 属性值。这样当用户点击 “电子邮箱:” 这个文字时,焦点就会自动跳转到输入框上[^3]。 #### 关于 `for` 属性的作用 `for` 属性指定了哪个表单项是由当前 `<label>` 所标记出来的。具体来说就是,这个属性应该指向某个具有唯一性的 `id` 值的表单组件(比如文本框、复选按钮或者单选钮)。这种机制不仅方便鼠标操作者,也特别有利于键盘导航以及屏幕阅读设备使用者找到目标字段的位置[^2]。 另外需要注意的是,虽然可以通过嵌套的方式让 `<label>` 包裹住整个表单控制部件及其描述信息来建立联系,但是推荐的做法还是利用上述提到过的 `for` 配合 `id` 方法实现更精确可靠的连接效果[^4]。 #### 总结说明 综上所述,在实际开发过程中合理运用好 `<label>` 及其相关联特性是非常重要的一步;不仅可以改善网页界面设计上的逻辑结构清晰度,而且还能极大地促进不同类型的终端访问群体获得更好的浏览体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值