内容显示页

label 标签的用法,点label选中单选、复选框或文本框

类别：web 2.0　|　浏览(49)　|　2008-3-22 12:51:10

ASPHTML.net
选中单选框选中单选框2
选中文本框

<input name="yongfa365" type="checkbox" id="a" value="ASP"><label for="a">ASP</label>
<input name="yongfa365" type="checkbox" id="b" value="HTML"><label for="b">HTML</label>
<input name="yongfa365" type="checkbox" id="c" value=".net"> <label for="c">.net</label><br />
<input name="yongfa365.com" type="radio" id="d" value="文本框"> <label for="d">选中单选框</label>
<input name="yongfa365.com" type="radio" id="d2" value="文本框2"> <label for="d2">选单选框2</label><br />
<label for="e">选中文本框</label><input name="yongfa365" type="text" id="e" value="">

不论是菜鸟还是老鸟，在网页设计过程中，或多或少都要涉及到网页的友好性及可用性的问题。单纯为设计而设计的东西可以说没有什么意义的。用户体验为第一目标才是我们设计的最终目标，作为一个网站来说，不可避免要使用表单，以增强用户与网站的交互性，除了设计或华丽或质朴的表单之外，它的可用性也不可忽视，不知道朋友们在使用表单时有没有发现，对于小小的选择框或者单选框，都需要我们把鼠标精确地点击到小框上面或者是小圆上时，才会完成交互响应，时间一长，虽然觉得不方便，总是会意识到这是一件很麻烦的事。使用LABEL标签可以很容易地解决这个问题，LABEL标签相信好多人都曾见过，只是用到LABEL标签的却是很少见到，本人也是在使用过程中无意中发现这个用法的。拿出来与大家共享。LABEL标签配合表单元素使用可以使用户在您网页上更加惬意地冲浪。使用形式如下：

<label for="hitme">LABEL用法</label>

你可以发现，无论是点击"LABEL用法" 还是点击那个框，都可以达到您的目的，只是要注意，FOR 属性一定要和表单元素的 id 配合使用才可以。

Firefox及IE都支持，比较好用

引用本页地址：http://www.yongfa365.com/item/labelBiaoQianDeYongFaDianlabelXuanZhongDanXuanFuXuanKuangHuoWenBenKuang.html