用css3和jQuery制作精美的表单

用css3和jQuery制作一个简单的精美表单

html代码如下：

  

<span class="title">Mask Your Input Forms and Make It Beauty</span>

<br/><br/>

<div id="container">

<p class="separator"><br/></p>

<p class="small-title">Too Plain</p>

<input class="too-plain" value="Enter your email here" />

<p class="separator"><br/></p>

<p class="small-title">Fading The Label</p>

<form>

    <label class="username-label" for="username">Username</label>

    <input type="text" name="username" class="username" />

    <label class="password-label" for="password">Password</label>

    <input type="password" name="password" class="password" />

</form>

<p class="separator"><br/></p>

<p class="small-title">Sliding? Don't Worry</p>

<form>

    <label class="username-label-sliding" for="username-sliding">Username</label>

    <input type="text" name="username" class="username-sliding" />

    <label class="password-label-sliding" for="password-sliding">Password</label>

    <input type="password" name="password" class="password-sliding" />

</form>

<p class="separator"><br/></p>

</div>

css代码如下：

  * {

    margin:0;

    padding:0;

}

body {

    text-align:center;

    font-family:Georgia, "Times New Roman", Times, serif;

    font-size:13px;

    line-height:1.5em;

    margin-top:8%;

    background:#eaeaea;

}

input {

    padding:7px;

    border:5px solid #e0e0e0;

    -webkit-border-radius:20px;

    border-radius:20px;

    -moz-border-radius:20px;

}

input:focus {

    outline:none;

}

#container {

    text-align:left;

    width:700px;

    margin-left:auto;

    margin-right:auto;

}

.separator {

    border-bottom:1px dashed #ccc;

    margin-bottom:3px;

}

.title {

    font-size:30px;

    margin-bottom:1.5em;

    font-weight:bold;

    font-style:italic;

    text-shadow:0 2px 0 #fff;

}

.small-title {

    font-size:20px;

    margin-bottom:0.5em;

    font-weight:bold;

    font-style:italic;

    text-shadow:0 2px 0 #fff;

}

.username-label, .password-label, .username-label-sliding, .password-label-sliding {

    position:absolute;

    margin:9px 9px 9px 12px;

}

.username-sliding, .password-sliding {

    width:150px;

}

a, a:visited, a:hover {

    text-decoration: none;

    color: #000;

}

jQuery代码如下：

$(document).ready(function(){

      $('.too-plain').focus(function(){

          if($(this).val()=="Enter your email here")

          {$(this).val("");}

          

          }).blur(function(){

              

              if($(this).val()=="")

              {

                  $(this).val('Enter your email here');

                  }

              });

              $(".username-label,.password-label").animate({ opacity: "0.4" }).click(function(){

                  var thisFor=$(this).attr("for");

                  $('.'+thisFor).focus();

                  })

                  $(".username").focus(function(){

                      $(".username-label").animate({opacity:"0"},"fast");

                      if($(this).val()=="username")

                      {

                          $(this).val()=="";

                          }

                      

                      }).blur(function(){

                          if($(this).val()=="")

                          {

                              $(this).val()=="username";

                              $(".username-label").animate({opacity:"0.4"},"fast");

                              }

                          })

            $('.password').focus(function(){

                

                $(".password-label").animate({opacity:"0"},"fast");

                if($(this).val()=="password"){

                    $(this).val()=="";

                    }

                

                }).blur(function(){

                    if($(this).val()=="")

                    {

                        $(this).val()=="password";

                        $('.password-label').animate({opacity:"0.4"},"fast");

                         }

                    

                    });

                    $('.username-label-sliding,.password-label-sliding').animate({opacity:"0.4"}).click(function(){

                        var thisFor=$(this).attr('for')

                            $('.'+thisFor).focus();

                        })

                            $('.username-sliding').focus(function() {

                

                    $('.username-label-sliding').animate({ marginLeft: "7em" }, "fast");

                

                        if($(this).val() == "username")

                            $(this).val() == "";

        

                    }).blur(function() {

                

                        if($(this).val() == "") {

                            $(this).val() == "username";

                            $('.username-label-sliding').animate({ marginLeft: "12px" }, "fast");

                        }

                    });

            

                $('.password-sliding').focus(function() {

                

                    $('.password-label-sliding').animate({ marginLeft: "7em" }, "fast");

                

                        if($(this).val() == "password") {

                            $(this).val() == "";

                        }

                    }).blur(function() {

                

                        if($(this).val() == "") {

                            $(this).val() == "password";

                            $('.password-label-sliding').animate({ marginLeft: "12px" }, "fast");

                        }

                });

      })

在firefox3.6，ie9,chrome中预览效果下图：



在ie7/8中预览效果如下图：