• 软件测试技术
  • 软件测试博客
  • 软件测试视频
  • 开源软件测试技术
  • 软件测试论坛
  • 软件测试沙龙
  • 软件测试资料下载
  • 软件测试杂志
  • 软件测试人才招聘
    暂时没有公告

字号: | 推荐给好友 上一篇 | 下一篇

Label 标识的妙用(转)

发布: 2007-6-30 18:56 | 作者: admin | 来源: | 查看: 12次 | 进入软件测试论坛讨论

领测软件测试网 一些别的标识做不到的事。让我们先来看一下面的例子。

★一个带热键的Form:(你可以用“Alt+下划线字母”来访问各字段)


    姓  名(N):  
    电子邮件(E):  
    联系电话(P):  
    留  言(S):  



  怎么样?不错吧。这主要是通过<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”。以下就是上面那个示例的HTML源码:

<FORM>
    <LABEL FOR="Namebox" ACCESSKEY="N">姓  名(<U>N</U>):</LABEL>
    <INPUT TYPE="TEXT" ID="Namebox" SIZE=30> <br>

    <LABEL FOR="Emailbox" ACCESSKEY="E">电子邮件(<U>E</U>):</LABEL>
    <INPUT TYPE="TEXT" ID="Emailbox" SIZE=30> <br>

    <LABEL FOR="Phonebox" ACCESSKEY="P">联系电话(<U>P</U>):</LABEL>
    <INPUT TYPE="TEXT" ID="Phonebox" SIZE=30> <br>

    <LABEL FOR="areabox" ACCESSKEY="S" >留  言(<U>S</U>):</LABEL>
    <TEXTAREA ID="areabox" COLS="30" ROWS="3"></TEXTAREA> <br>
</FORM>

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

  大家在网上看见的一些复选框,单选钮都是要点那个小元件才能达到选择的目的的,有没有可能我们能通过点击复选
框或是单选钮来达到选择这个元件的目的呢?答案是显然的,用<label>标识就可以达到这一目标,被<lable></lable>所
包括的字就是可点击的了。下面有一个示例,同样是用了这个标识符。


     经常来这里 偶尔来看看


下面是这个示例的HTML源码:

<form>
    <input type="CHECKBOX" id="check1" value="often" name="checkoften">
    <label for="check1" >经常来这里</label>
    <input type="CHECKBOX" id="check2" value="seldom" name="checkseldom">
    <label for="check2" >偶尔来看看</label>
</form>

★带热键的多项选择框:

于是,一个带热键的改良型复选框就产生了。


     经常来这里(H)      偶尔来看看(L)


<form>
    <input type="CHECKBOX" id="check3" value="often" name="checkoften">
    <label for="check3" ACCESSKEY="H">经常来这里(<U>H</U>)</label>
    <input type="CHECKBOX" id="check4" value="seldom" name="checkseldom">
    <label for="check4" ACCESSKEY="L">偶尔来看看(<U>L</U>)</label>
</form>

  怎么样?这就是<label>的妙用,它可以用在别的HTML元件上,会有不同的功能哦。

延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/


关于领测软件测试网 | 领测软件测试网合作伙伴 | 广告服务 | 投稿指南 | 联系我们 | 网站地图 | 友情链接
版权所有(C) 2003-2010 TestAge(领测软件测试网)|领测国际科技(北京)有限公司|软件测试工程师培训网 All Rights Reserved
北京市海淀区中关村南大街9号北京理工科技大厦1402室 京ICP备2023014753号-2
技术支持和业务联系:info@testage.com.cn 电话:010-51297073

软件测试 | 领测国际ISTQBISTQB官网TMMiTMMi认证国际软件测试工程师认证领测软件测试网