如何实现这样一个功能呢？当用户要填写表单时，文本框内会给出提示信息，如下图。

 

 

当用户点击（文本框获得焦点）之后，如下图：

 

 

当用户开始输入时，如下图所示：

 

 

代码供参考：

 

 
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.         <title>huangwei </title> 
  6.         <script type="text/javascript"> 
  7.             //onclick="alert(this.innerText)" 
  8.         function labelClick(){  
  9.             var username=document.getElementsByName("username")[0];  
  10.             var myLabel = document.getElementById("mylabel");  
  11.             if(username.value==""){  
  12.                 myLabel.className="block3";//italic  
  13.             }  
  14.             username.focus();  
  15.         }  
  16.         function TextKeyUp(){  
  17.             var myLabel = document.getElementById("mylabel");  
  18.             var username = document.getElementsByName("username")[0];  
  19.             if (username.value == "") {  
  20.                 myLabel.style.zIndex = 0;  
  21.                 myLabel.className="block3";//italic  
  22.             }  
  23.             else {  
  24.             myLabel.style.zIndex = -2;  
  25.             }  
  26.         }  
  27.         function TextKeydown(){  
  28.             var myLabel = document.getElementById("mylabel");  
  29.             myLabel.style.zIndex = -2;  
  30.         }  
  31.         function TextFocus(){  
  32.             var myLabel = document.getElementById("mylabel");  
  33.             var username = document.getElementsByName("username")[0];  
  34.             if(username.value==""){  
  35.                 myLabel.style.zIndex = 0;  
  36.                 myLabel.className="block3";//italic  
  37.             }else{  
  38.                 myLabel.style.zIndex = -2;  
  39.             }  
  40.         }  
  41.         function TextBlur(){  
  42.             var myLabel = document.getElementById("mylabel");  
  43.             var username = document.getElementsByName("username")[0];  
  44.             if(username.value==""){  
  45.                 myLabel.style.zIndex = 0;  
  46.                 myLabel.className="block2";  
  47.             }  
  48.         }  
  49.         </script> 
  50.         <style type="text/css"> 
  51.             .block1{  
  52.                 width:50xp;  
  53.                 height:20px;  
  54.                 padding:10px;  
  55.                 margin:5px;  
  56.                 background-color:#ffffff;  
  57.                                 position:absolute;  
  58.                 left:15px;  
  59.                 top:30px;  
  60.                 z-index:-1;  
  61.           
  62.             }  
  63.             .block2{  
  64.                 width:50xp;  
  65.                 height:16px;  
  66.                 padding:10px;  
  67.                 margin:5px;  
  68.                 background-color:#ffffff;  
  69.                                 position:absolute;  
  70.                 left:20px;  
  71.                 top:32px;  
  72.                 font-weight:bolder;  
  73.                 color:#ACA899;  
  74.                 font-style:normal;  
  75.                 z-index:0;  
  76.       
  77.             }  
  78.             .block3{  
  79.                 width:50xp;  
  80.                 height:16px;  
  81.                 padding:10px;  
  82.                 margin:5px;  
  83.                 background-color:#ffffff;  
  84.                                 position:absolute;  
  85.                 left:20px;  
  86.                 top:32px;  
  87.                 color:#7e7e7e;  
  88.                 font-style:italic;  
  89.                 z-index:0;  
  90.             }                 
  91.                       
  92.         </style> 
  93.     </head> 
  94.     <body> 
  95.         <input type="text" name="username" class="block1" onkeyup="TextKeyUp();" onkeydown="TextKeydown();" onfocus="TextFocus();" onblur="TextBlur();" /> 
  96.         <label id="mylabel" class="block2" onclick="labelClick()" /> 
  97.             请输入用户名  
  98.         </label> 
  99.     </body> 
  100. </html>