首页 > 代码库 > <label>标签for属性的妙用

<label>标签for属性的妙用

2024-07-20 11:03:13   226人阅读

在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<label>标签的for属性

定义：for 属性规定 label 与哪个表单元素绑定

 

[html] view plaincopy
  1. <!--  
  2. 显式的联系：  
  3. <label for="SSN">Social Security Number:</label>  
  4. <input type="text" name="SocSecNum" id="SSn" />  
  5.   
  6. 隐式的联系：  
  7. <label>Date of Birth: <input type="text" name="DofB" /></label>  
  8. -->    


下面是例子：

[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=http://www.mamicode.com/"basketball" name="hobby" id="_basketball">basketball</label>  
    27.                 <label><input type="checkbox" value=http://www.mamicode.com/"football" name="hobby" id="_football">football</label>  
    28.                 <label><input type="checkbox" value=http://www.mamicode.com/"skating" name="hobby" id="_skating">skating</label>  
    29.                 <label><input type="checkbox" value=http://www.mamicode.com/"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=http://www.mamicode.com/"boy" name="sex" id="_boy">boy</label>  
    36.                 <label><input type="radio" value=http://www.mamicode.com/"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> 

<label>标签for属性的妙用


联系
我们