<label>标签for属性 

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。
实例
带有两个输入字段和相关标记的简单 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>
下面是例子：
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5.   
  6. <title>无标题文档</title>  
  7. </head>  
  8. <body>  
  9.       
  10.     <table>  
  11.         <tr>  
  12.             <td><label for="username">用户名：</label></td>  
  13.             <td><input type="text" name="username" id="username"></td>  
  14.         </tr>  
  15.         <tr>  
  16.             <td><label for="password">密码：</label></td>  
  17.             <td><input type="password" name="password" id="password"></td>  
  18.         </tr>  
  19.         <tr>  
  20.             <td><label for="repassword">密码确认：</label></td>  
  21.             <td><input type="password" name="repassword" id="repassword"></td>  
  22.         </tr>  
  23.         <tr>  
  24.             <td><label for="_basketball">爱好：</label></td>  
  25.             <td>  
  26.                 <label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label>  
  27.                 <label><input type="checkbox" value="football" name="hobby" id="_football">football</label>  
  28.                 <label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label>  
  29.                 <label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label>  
  30.             </td>  
  31.         </tr>  
  32.         <tr>  
  33.             <td><label for="_boy">性别：</label></td>  
  34.             <td>  
  35.                 <label><input type="radio" value="boy" name="sex" id="_boy">boy</label>  
  36.                 <label><input type="radio" value="girl" name="sex">girl</label>  
  37.             </td>  
  38.         </tr>  
  39.         <tr>  
  40.             <td><label for="email">邮箱：<label></td>  
  41.             <td><input type="text" name="email" id="email"></td>  
  42.         </tr>  
  43.         <tr>  
  44.             <td><label for="address">住址：</label></td>  
  45.             <td><input type="text" name="address" id="address"></td>  
  46.         </tr>  
  47.     </table>  
  48. </body>  
  49. </html>  
posted @ 2014-05-01 13:56  baoendemao  阅读(1402)  评论(0)  编辑  收藏  举报