Focus效果的提交信息表单

<! 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 > Focus效果的提交信息表单 </ title >
    
< style  type ="text/css"  media ="all" >
    form
{
    margin
: 0px auto;
    width
: 450px;
    border
: solid 1px #CCCCCC;
}


.bo
{
    border-bottom
: solid 1px #CCCCCC;
}


label
{
    float
: left;
    padding
: 10px 0px 4px 30px;
}


input
{
    padding
: 1px;
}


input,textarea
{
    border
: 1px solid #CCCCCC;
    margin
: 5px 0px;
}


textarea
{
    padding
: 2px;
}


.bt
{
    width
: 38px;
    height
: 20px;
    font-size
: 11px;
    border
: solid 1px #CCCCCC;
    background
: #FBFBFB;
    text-align
: center;
}


.btcenter
{
    text-align
: center;
    clear
: left;
    padding
: 4px 0px 0px;
}


.sffocus 
{
    background
: #F0F9FB; /*----for IE----*/
    border
: 1px solid #1D95C7;
}


textarea:focus, input:focus 
{
    background
: #F0F9FB; *----for firefox----*/
    border
: 1px solid #1D95C7;
}


body 
{
    font-family
: Arial, Helvetica, sans-serif;
    font-size
: 12px;
    color
: #666666;
    margin-top
: 20px;
}


    
</ style >

    
< script   type ="text/javascript" >
    
<!--
function suckerfish(type, tag, parentId) {
    
if (window.attachEvent) {
        window.attachEvent(
"onload"function() {
            
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
            type(sfEls);
            }
);
    }

}

sfFocus 
= function type(sfEls) {
    
for (var i=0; i<sfEls.length; i++{
        sfEls[i].onfocus 
= function() {this.className+=" sffocus";}
        sfEls[i].onblur
=function() this.className=this.className.replace(new RegExp(" sffocus\\b"), "");    }
    }

}

suckerfish(sfFocus, 
"INPUT");
suckerfish(sfFocus, 
"TEXTAREA"); 

    
//-->
    
</script>

    
<link rel="Shortcut Icon" type="image/x-icon" href="" />    
</head>
<body>
<form action="#" method="post" name="myform" id="myform">
    
<div class="bo">
        
<label for="name">姓名:</label>
        
<input type="text"size="20" name="name" id="name" maxlength="10" /></div>
    
<div class="bo">
        
<label for="tel">邮件:</label>
        
<input type="text" size="20" name="tel" id="tel" maxlength="16" /></div>
    
<div class="bo">
        
<label for="mo">标题:</label>
        
<input type="text" size="30" name="mo" id="mo" maxlength="20" /></div>
    
<div class="bo">
        
<label for="con">内容:</label>
        
<textarea cols="40" rows="8" name="con" id="con"></textarea></div>
    
<div class="btcenter">
        
<input type="submit" class="bt" value="Send" />
        
&nbsp;<input type="reset" class="bt" value="Reset" /></div>

</form>
</body>
</html>

你可能感兴趣的:(JavaScript,XHTML,css,IE,firefox)