UDN-企业互联网技术人气社区

板块导航

浏览  : 2715
回复  : 2

[资源] HTML5分步骤注册表单 HTML5表单经典

[复制链接]
圆圆的头像 楼主
发表于 2015-7-15 20:28:07 | 显示全部楼层 |阅读模式
    表单在网页应用中十分重要,今天我要向大家分享一款基于HMLT5的分步骤注册表单,表单外观比较华丽,点击下一步按钮即可跳转到下一步填写注册信息。改HTML5表单使用了很多CSS3属性,从而在表单切换时拥有弹性的动画,是一款很不错的HTML5表单。





     接下来我们要来一起看看实现的过程是怎样的。代码有点复杂,主要由HTML代码、CSS3代码以及Javascript代码组成。

     HTML代码:

  1. <form id="msform">
  2.         <!-- progressbar -->
  3.         <ul id="progressbar">
  4.                 <li>Account Setup</li>
  5.                 <li>Social Profiles</li>
  6.                 <li>Personal Details</li>
  7.         </ul>
  8.         <!-- fieldsets -->
  9.         <fieldset>
  10.                 <h2>Create your account</h2>
  11.                 <h3>This is step 1</h3>
  12.                 <input type="text" name="email" placeholder="Email" />
  13.                 <input type="password" name="pass" placeholder="Password" />
  14.                 <input type="password" name="cpass" placeholder="Confirm Password" />
  15.                 <input type="button" name="next" value="Next" />
  16.         </fieldset>
  17.         <fieldset>
  18.                 <h2>Social Profiles</h2>
  19.                 <h3>Your presence on the social network</h3>
  20.                 <input type="text" name="twitter" placeholder="Twitter" />
  21.                 <input type="text" name="facebook" placeholder="Facebook" />
  22.                 <input type="text" name="gplus" placeholder="Google Plus" />
  23.                 <input type="button" name="previous" value="Previous" />
  24.                 <input type="button" name="next" value="Next" />
  25.         </fieldset>
  26.         <fieldset>
  27.                 <h2>Personal Details</h2>
  28.                 <h3>We will never sell it</h3>
  29.                 <input type="text" name="fname" placeholder="First Name" />
  30.                 <input type="text" name="lname" placeholder="Last Name" />
  31.                 <input type="text" name="phone" placeholder="Phone" />
  32.                 <textarea name="address" placeholder="Address"></textarea>
  33.                 <input type="button" name="previous" value="Previous" />
  34.                 <input type="submit" name="submit" value="Submit" />
  35.         </fieldset>
  36. </form>
复制代码

     HTML代码看起来很多,但是很简单,主要是描述了一form表单。

     CSS代码:

  1. /*form styles*/
  2. #msform {
  3.         width: 400px;
  4.         margin: 50px auto;
  5.         text-align: center;
  6.         position: relative;
  7. }
  8. #msform fieldset {
  9.         background: white;
  10.         border: 0 none;
  11.         border-radius: 3px;
  12.         box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  13.         padding: 20px 30px;

  14.         box-sizing: border-box;
  15.         width: 80%;
  16.         margin: 0 10%;

  17.         /*stacking fieldsets above each other*/
  18.         position: absolute;
  19. }
  20. /*Hide all except first fieldset*/
  21. #msform fieldset:not(:first-of-type) {
  22.         display: none;
  23. }
  24. /*inputs*/
  25. #msform input, #msform textarea {
  26.         padding: 15px;
  27.         border: 1px solid #ccc;
  28.         border-radius: 3px;
  29.         margin-bottom: 10px;
  30.         width: 100%;
  31.         box-sizing: border-box;
  32.         font-family: montserrat;
  33.         color: #2C3E50;
  34.         font-size: 13px;
  35. }
  36. /*buttons*/
  37. #msform .action-button {
  38.         width: 100px;
  39.         background: #27AE60;
  40.         font-weight: bold;
  41.         color: white;
  42.         border: 0 none;
  43.         border-radius: 1px;
  44.         cursor: pointer;
  45.         padding: 10px 5px;
  46.         margin: 10px 5px;
  47. }
  48. #msform .action-button:hover, #msform .action-button:focus {
  49.         box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
  50. }
  51. /*headings*/
  52. .fs-title {
  53.         font-size: 15px;
  54.         text-transform: uppercase;
  55.         color: #2C3E50;
  56.         margin-bottom: 10px;
  57. }
  58. .fs-subtitle {
  59.         font-weight: normal;
  60.         font-size: 13px;
  61.         color: #666;
  62.         margin-bottom: 20px;
  63. }
  64. /*progressbar*/
  65. #progressbar {
  66.         margin-bottom: 30px;
  67.         overflow: hidden;
  68.         /*CSS counters to number the steps*/
  69.         counter-reset: step;
  70. }
  71. #progressbar li {
  72.         list-style-type: none;
  73.         color: white;
  74.         text-transform: uppercase;
  75.         font-size: 9px;
  76.         width: 33.33%;
  77.         float: left;
  78.         position: relative;
  79. }
  80. #progressbar li:before {
  81.         content: counter(step);
  82.         counter-increment: step;
  83.         width: 20px;
  84.         line-height: 20px;
  85.         display: block;
  86.         font-size: 10px;
  87.         color: #333;
  88.         background: white;
  89.         border-radius: 3px;
  90.         margin: 0 auto 5px auto;
  91. }
  92. /*progressbar connectors*/
  93. #progressbar li:after {
  94.         content: '';
  95.         width: 100%;
  96.         height: 2px;
  97.         background: white;
  98.         position: absolute;
  99.         left: -50%;
  100.         top: 9px;
  101.         z-index: -1; /*put it behind the numbers*/
  102. }
  103. #progressbar li:first-child:after {
  104.         /*connector not needed before the first step*/
  105.         content: none;
  106. }
  107. /*marking active/completed steps green*/
  108. /*The number of the step and the connector before it = green*/
  109. #progressbar li.active:before,  #progressbar li.active:after{
  110.         background: #27AE60;
  111.         color: white;
  112. }
复制代码

    这里我们只是将渲染表单的CSS代码贴了出来,这让我们的表单看起来非常清新自然。另外要说明的一点是,这里我们利用了CSS3的:before属性。

    最后是Javascript代码,可以实现注册表单的步骤跳转。

    Javascript代码:
  1. var current_fs, next_fs, previous_fs; //fieldsets
  2. var left, opacity, scale; //fieldset properties which we will animate
  3. var animating; //flag to prevent quick multi-click glitches

  4. $(".next").click(function(){
  5.         if(animating) return false;
  6.         animating = true;

  7.         current_fs = $(this).parent();
  8.         next_fs = $(this).parent().next();

  9.         //activate next step on progressbar using the index of next_fs
  10.         $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

  11.         //show the next fieldset
  12.         next_fs.show();
  13.         //hide the current fieldset with style
  14.         current_fs.animate({opacity: 0}, {
  15.                 step: function(now, mx) {
  16.                         //as the opacity of current_fs reduces to 0 - stored in "now"
  17.                         //1. scale current_fs down to 80%
  18.                         scale = 1 - (1 - now) * 0.2;
  19.                         //2. bring next_fs from the right(50%)
  20.                         left = (now * 50)+"%";
  21.                         //3. increase opacity of next_fs to 1 as it moves in
  22.                         opacity = 1 - now;
  23.                         current_fs.css({'transform': 'scale('+scale+')'});
  24.                         next_fs.css({'left': left, 'opacity': opacity});
  25.                 },
  26.                 duration: 800,
  27.                 complete: function(){
  28.                         current_fs.hide();
  29.                         animating = false;
  30.                 },
  31.                 //this comes from the custom easing plugin
  32.                 easing: 'easeInOutBack'
  33.         });
  34. });

  35. $(".previous").click(function(){
  36.         if(animating) return false;
  37.         animating = true;

  38.         current_fs = $(this).parent();
  39.         previous_fs = $(this).parent().prev();

  40.         //de-activate current step on progressbar
  41.         $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  42.         //show the previous fieldset
  43.         previous_fs.show();
  44.         //hide the current fieldset with style
  45.         current_fs.animate({opacity: 0}, {
  46.                 step: function(now, mx) {
  47.                         //as the opacity of current_fs reduces to 0 - stored in "now"
  48.                         //1. scale previous_fs from 80% to 100%
  49.                         scale = 0.8 + (1 - now) * 0.2;
  50.                         //2. take current_fs to the right(50%) - from 0%
  51.                         left = ((1-now) * 50)+"%";
  52.                         //3. increase opacity of previous_fs to 1 as it moves in
  53.                         opacity = 1 - now;
  54.                         current_fs.css({'left': left});
  55.                         previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  56.                 },
  57.                 duration: 800,
  58.                 complete: function(){
  59.                         current_fs.hide();
  60.                         animating = false;
  61.                 },
  62.                 //this comes from the custom easing plugin
  63.                 easing: 'easeInOutBack'
  64.         });
  65. });

  66. $(".submit").click(function(){
  67.         return false;
  68. })
复制代码

    这里我们可以看到,利用jQuery代码变得非常简洁。主要是3个事件:next、previous、submit,同时在next和previous时利用jQuery实现淡入淡出的动画效果,是不是很迷人?

jiaoben1041.rar

3.62 KB, 下载次数: 14

相关帖子

发表于 2015-8-10 22:19:46 | 显示全部楼层
Very Good!
使用道具 举报

回复

发表于 2015-8-18 08:19:53 | 显示全部楼层
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部