兼容IE的login表单巧妙写法

利用label来写：

HTML：

<div class="loginwrap">
   <label for="phonenumber" class="nt">手机号码</label><input type="text" class="phonenumber" id="phonenumber" value=""/>
   <label for="password" class="pt">密码</label><input type="password" class="password" id="password" value=""/>
   <div class="loginbutton">
       <a href="iinfor.html" class="login_submit active">登录</a>
       <a href="forgetpsw.html" class="login-forget-pwd">找回密码</a>
   </div>
</div>

css:

.loginwrap input{
    height:54px;
    line-height: 54px;
    width:314px;
    padding-left: 42px;
    border: 1px solid #bd9540;
    border-radius: 4px;
    margin-bottom: 36px;
    font-size: 18px;
    color:#5b5b5b;
}
.forgetpswbody .loginwrap input{
    margin-bottom: 20px;
}
.loginwrap .phonenumber{
    background:#fff url(../images/login_yhm.png) 16px center no-repeat;
}
.loginwrap .password{
    background:#fff url(../images/login_psw.png) 16px center no-repeat;
}
.loginwrap .email{
    background:#fff url(../images/login_psw.png) 16px center no-repeat;
}
.forgetpswbody .loginwrap input{
    background: none;
    background-color: #fff;
    padding-left: 20px;
    width: 339px;
}
.loginwrap label{
    position: absolute;
    left: 96px;
    font-size: 18px;
    color:#5b5b5b;
}
.nt,.ut{
    top: 54px;
}
.forgetpswbody .ut{
    left: 71px;
    top: 54px;
}
.ut{

}
.pt{
    top: 147px;
}
.forgetpswbody .pt{
    left: 71px;
    top:132px;
}
.et{
    top: 240px;
}
.forgetpswbody .et{
    left: 71px;
    top: 211px;
}

javascript:

$(function(){
      $('.loginwrap input').focus(function(event) {
             $(this).prev().hide();
       });
       $('.loginwrap input').blur(function(event) {
            if(this.value ===''){
                $(this).prev().show();
            }
        });
});