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

用css3和jQuery制作精美的表单相关推荐

jquery submit()不能提交表单的解决方法
jquery submit()不能提交表单的解决方法参考文章: (1)jquery submit()不能提交表单的解决方法 (2)https://www.cnblogs.com/war-hzl/p/ ...
jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...
jQuery的ajax提交表单
jQuery的ajax提交表单 1.表单 <form id="ff" method="post"><div class="input ...
java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
jQuery使用ajaxSubmit()提交表单示例（转）
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下: 准备工作: ajaxSubmit(obj)方法是jQuery ...
jQuery使用ajaxSubmit()提交表单示例
jQuery使用ajaxSubmit()提交表单示例 2014-08-26 07:42 | 9975人阅读 | 来源 ajaxSubmit(obj)方法是jQuery的一个插件jquery.form. ...
前端HTML基础小练习-制作一个相亲表单
前端HTML基础-制作一个相亲表单初学前端的一个小练习涉及知识:HTML,CSS 编译环境:Hbuilder 实现效果: 实现代码: <!DOCTYPE html> <html& ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...

用css3和jQuery制作精美的表单

用css3和jQuery制作精美的表单相关推荐

最新文章

热门文章