label标签的for属性在CSS里的妙用看后包您以逸待劳
实例带有两个输入字段和相关标记的简单 HTML 表单：
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /></form>亲自试一试
定义和用法for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。
例如，在 XHTML 中：
显式的联系：<label for="SSN">Social Security Number:</label><input type="text" name="SocSecNum" id="SSN" /> 隐式的联系：<label>Date of Birth: <input type="text" name="DofB" /></label>第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。
浏览器支持所有主流浏览器都支持 for 属性。
Safari 2 或更早的版本不支持 for 属性。
语法<label for="value">上一节讲到了文本框的表单格式，末尾部分提到了四种type表单控件样式，这一节介绍一下另外一个常用的控件，单选框控件样式，type="radio" 单选框，常用于单选，也就是唯一选择功能，下面通过案例很好理解，我们的性别具有唯一性，只能选择一个：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p>请选择你的性别；</p>
<form id="form1" name="form1" method="post" action="action_page.php">
<label>
<input type="radio" name="radiobutton" value="radiobutton" />
男</label>
<label>
<input type="radio" name="radiobutton" value="radiobutton" />
女</label><br /><br />
<input type="submit" value="提交">
</form>
</body>
</html>
测试效果如下：
form里面的id和name属性上一节有介绍，id是唯一的，name用来提交数据，method="post"意思是当前的数据用post方法传递，这些跟上一节都是一样的，不一样的地方在哪里呢？
1）action="action_page.php"，这个action属性是说明提交按钮点击后，表单数据会提交到名为 "action_page.php" 的页面，也就是把数据提交到哪里去；
2）label标签的使用，这里没有使用table而是使用label，label标签为input元素定义标签，label标签的for属性应当与相关元素的id属性相同，等下看第二种代码写法。
3）type="radio"这个表示表单控件类型是单选框、复选框不做示范了，大家可以自行测试。
接下来看第二种代码写法，效果是一样的，需要注意的地方是这里for属性与id属性是一致的，要么都是male，要么都是female。另外，这个案例也再次验证了id与name的区别，id具有唯一性，name可以多次使用。
1.打开可以编辑html的软件，输入如下代码：
<form><label for="hello">hello</label><input type="radio" name="sex" id="hello" /><br /><label for="world">world</label><input type="radio" name="sex" id="world" /></form>
2.运行后可以看出如下结果：
3.3
解释：注意代码中的for和id，这两个要一样。效果就是当你的鼠标的指针指到
lable标签时，对应的id就会获得焦点。
用for属性的人就不要看了
<label>标签的for属性格式
<label for=""></label>
描述：设置或获取给定标签对象指定到的对象。
一般用在输入框，单选框，复选框等地方
注意for的值要与所用控件的Name值对应
用实例来演示，看后就明白了
[xhtml] view plaincopy
1.<html>
2.<body>
3.<fieldset>
4.<legend>item：</legend>
5.<form>
6.<label for="name">name：</label><input type="text" id="name" />
7.<label for="man">男 </label><input type="checkbox" name="man" id="man"/>
8.<label for="woman">女 </label><input type="checkbox" name="woman" id="woman"/>
9.</form>
10.</body>
11.</html>
[xhtml] view plain copy
1.<html>
2.<body>
3.<fieldset>
4.<legend>item：</legend>
5.<form>
6.<label for="name">name：</label><input type="text" id="name" />
7.<label for="man">男 </label><input type="checkbox" name="man" id="man"/>
8.<label for="woman">女 </label><input type="checkbox" name="woman" id="woman"/>
9.</form>
10.</body>
11.</html>
当我们运行后，首先我们单击用户名时就会发现和直接单击输入框一样都可以使光标定位到输入框里
当单击复选框男或者女时效果和我们直接单击复选框打勾的效果一样都可以进行打勾操作
这就是for属性的用法，很简单
|( 京ICP备09078825号 )
发表于 2017-5-11 22:18:17
收藏
