css3とjQuery_html/css_WEB-ITnoseで美しいフォームを作成

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

html代码如下：

 

Mask Your Input Forms and Make It Beauty

Too Plain

Fading The Label

    Username          Password     

Sliding? Don't Worry

    Username          Password     

css代码如下：

* { margin:0;     パディング:0; } body { text-align:center;     font-family:Georgia、「Times New Roman」、Times、セリフ;     フォントサイズ:13px;     行の高さ:1.5em;     マージントップ:8%;     背景:#eaeaea; } input { padding:7px;     ボーダー:5px ソリッド #e0e0e0;     -webkit-border-radius:20px;     境界半径:20px;     -moz-border-radius:20px; } input:focus { outline:none; #container { text-align:left;     幅:700ピクセル;     マージン左:自動;     マージン右:自動; .separator { border-bottom:1px 破線 #ccc;     マージン-ボトム:3px; } .title { font-size:30px;     マージン-ボトム:1.5em;     フォントの太さ:太字;     フォントスタイル:斜体;     テキストシャドウ:0 2px 0 #fff; } .small-title { font-size:20px;     マージン-ボトム:0.5em;     フォントの太さ:太字;     フォントスタイル:斜体;     テキストシャドウ:0 2px 0 #fff; } .username-label、.password-label、.username-label-sliding、.password-label-sliding { position:absolute;     マージン:9 ピクセル 9 ピクセル 9 ピクセル 12 ピクセル; } .username-sliding、.password-sliding { width:150px; } a、a:visited、a:hover { text-decoration: none;     色: #000; }

jQuery代码如下：

$(document).ready(function(){ $('.too-plain').focus(function(){ if($(this).val()=="ここにメールアドレスを入力してください") {$( this).val("");} }).blur(function(){ if($(this).val()=="") { $(this). val('ここにメールアドレスを入力してください'); } }); $(".username-label,.password-label").animate({ opacity: "0.4" }).click(function(){ var thisFor=$(this).attr("for") ; $('.'+thisFor).focus(); }) $(".username").focus(function(){ $(".username-label") animate({不透明度:"0"}, "高速"); if($(this).val()=="ユーザー名") { $(this).val()==""; ... ).val()=="") { $(this).val()=="ユーザー名";                               $(".username-label").animate({opacity:"0.4"},"fast");                               } }) $('.password').focus(function(){ $(".password-label").animate({opacity:"0"},"fast"); if($(this).val ()=="パスワード"){ $(this).val()==""; } }).blur(function(){ if($(this).val()=="") { $( this).val()=="パスワード"; $('.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 " }, "高速"); if($(this).val() == "ユーザー名") $(this).val() == ""; }).blur(function() { if($( this).val() == "") { $(this).val() == "ユーザー名"; $('.username-label-sliding').animate({ marginLeft: "12px" }, "fast "); } });                              $('.password-sliding').focus(function() { $('.password-label-sliding').animate({ marginLeft: "7em" }, "fast"); if($(this). val() == "パスワード") { $(this).val() == ""; } }).blur(function() { if($(this).val() == "") { $ (this).val() == "パスワード"; $('.password-label-sliding').animate({ marginLeft: "12px" }, "fast"); } });       })

Firefox3.6、ie9、chrome中预览果如下图：

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