用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中预览效果如下图：