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>
测试效果如下：
label标签的for属性在CSS里的妙用看后包您以逸待劳 b2b软件

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可以多次使用。
label标签的for属性在CSS里的妙用看后包您以逸待劳 b2b软件

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属性格式

描述：设置或获取给定标签对象指定到的对象。

一般用在输入框，单选框，复选框等地方

注意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