zoukankan      html  css  js  c++  java

  • <label>标签for属性的妙用

    在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，这个是怎么实现的呢？就是下面我要介绍的<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="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>  
  • 相关阅读:
    Spring使用JDBC配置具名参数
    linux中的匿名管道和命名管道
    linux查看CPU信息
    磁盘阵列RAID原理、种类及性能优缺点对比
    SMP和MPP的优缺点
    Hadoop datablock size
    MySQL 高可用架构之MHA
    MySQL 高可用架构之MMM
    五大常见的MySQL高可用方案
    hive加载数据
  • 原文地址：https://www.cnblogs.com/hechunhua/p/3625307.html
Copyright © 2011-2022 走看看