CSS3+HTML5 example of how to implement a step-through registration login form

Step into the login registration form is now more, mainly to improve the user experience, users can selectively fill in the corresponding form information, not to let users see a pile of forms to deter. Today and you are sharing is a HTML5 and CSS3 based on the Step registration form, the appearance of needless to say, very beautiful. You'll know by looking at the demo.

Here is an online demo, you can look at the effect first.

Next we will come together to see how the implementation process is. The code is a bit complex, consisting mainly of HTML code, CSS3 code, and JavaScript code.

HTML code:

<form id= "Msform" > <!--ProgressBar--<ul id= "ProgressBar" > <li>account setup</l i> <li>social profiles</li> <li>personal details</li> </ul> <!--f Ieldsets-<fieldset> 
The HTML code looks a lot, but it's simple, mostly describing a form.

CSS code:



/*form styles*/#msform {width:400px;    margin:50px Auto;    Text-align:center; Position:relative;}    #msform fieldset {background:white;    border:0 none;    border-radius:3px;    box-shadow:0 0 15px 1px rgba (0, 0, 0, 0.4);    padding:20px 30px;    Box-sizing:border-box;    width:80%;    Margin:0 10%; /*stacking fieldsets above each other*/position:absolute;} /*hide all except first fieldset*/#msform Fieldset:not (: first-of-type) {display:none;}    /*inputs*/#msform Input, #msform textarea {padding:15px;    border:1px solid #ccc;    border-radius:3px;    margin-bottom:10px;    width:100%;    Box-sizing:border-box;    Font-family:montserrat;    Color: #2C3E50; font-size:13px;}    /*buttons*/#msform. Action-button {width:100px;    Background: #27AE60;    Font-weight:bold;    Color:white;    border:0 none;    border-radius:1px;    Cursor:pointer;    padding:10px 5px; margin:10px 5px;} #msform. Action-button:hover, #msform. Action-button: Focus {box-shadow:0 0 0 2px white, 0 0 0 3px #27AE60;}    /*headings*/.fs-title {font-size:15px;    Text-transform:uppercase;    Color: #2C3E50; margin-bottom:10px;}.    fs-subtitle {font-weight:normal;    font-size:13px;    Color: #666; margin-bottom:20px;}    /*progressbar*/#progressbar {margin-bottom:30px;    Overflow:hidden; /*css counters to number the steps*/counter-reset:step;}    #progressbar Li {list-style-type:none;    Color:white;    Text-transform:uppercase;    font-size:9px;    width:33.33%;    Float:left; Position:relative;}    #progressbar Li:before {content:counter (step);    Counter-increment:step;    width:20px;    line-height:20px;    Display:block;    font-size:10px;    Color: #333;    Background:white;    border-radius:3px; margin:0 auto 5px Auto;}    /*progressbar connectors*/#progressbar li:after {content: ';    width:100%;    height:2px;    Background:white;    Position:absolute;    Left:-50%;  top:9px;  Z-index:-1; /*put it behind the numbers*/} #progressbar li:first-child:after {/*connector not needed before the first step*/con Tent:none; }/*marking active/completed Steps green*//*the number of the step and the connector before it = green*/#progressbar li.act    Ive:before, #progressbar li.active:after{background: #27AE60; Color:white;}
Here we just post the CSS code for the rendered form, which makes our form look very fresh and natural. Another point to note is that here we take advantage of the CSS3: Before property.

Finally, the JavaScript code, you can implement the registration form of the steps to jump.

JavaScript code:



var current_fs, Next_fs, Previous_fs; Fieldsetsvar left, opacity, scale; FieldSet properties which we'll animatevar animating;    Flag to prevent quick Multi-click glitches$ (". Next"). Click (function () {if (animating) return false;    animating = true;    CURRENT_FS = $ (this). parent ();    NEXT_FS = $ (this). Parent (). Next (); Activate next step on ProgressBar using the index of NEXT_FS $ ("#progressbar li"). EQ ($ ("fieldset"). Index (NEXT_FS)). ad    DClass ("active");     Show the next fieldset next_fs.show (); Hide the current fieldset with style current_fs.animate ({opacity:0}, {step:function (now, MX) {/ /as the opacity of CURRENT_FS reduces to 0-stored in "Now"//1.            Scale current_fs down to 80% scale = 1-(1-now) * 0.2; 2.            Bring Next_fs from the right (50%) left = (now * 50) + "%"; 3.            Increase opacity of next_fs to 1 as it moves in opacity = 1-now; Current_fs.css ({' TRAnsform ': ' Scale (' +scale+ ') '});        Next_fs.css ({' Left ': Left, ' opacity ': opacity});            }, duration:800, Complete:function () {current_fs.hide ();        animating = false; },//this comes from the custom easing plugin easing: ' Easeinoutback '});    $ (". Previous"). Click (function () {if (animating) return false;    animating = true;    CURRENT_FS = $ (this). parent ();    PREVIOUS_FS = $ (this). Parent (). Prev (); De-activate current Step on ProgressBar $ ("#progressbar li"). EQ ($ ("fieldset"). Index (CURRENT_FS)). Removeclass ("    Active ");     Show the previous fieldset previous_fs.show (); Hide the current fieldset with style current_fs.animate ({opacity:0}, {step:function (now, MX) {/ /as the opacity of CURRENT_FS reduces to 0-stored in "Now"//1.            Scale previous_fs from 80% to 100% scale = 0.8 + (1-now) * 0.2; 2. Take Current_fs to the right (50%) – from 0%           left = ((1-now) * 50) + "%"; 3.            Increase opacity of previous_fs to 1 as it moves in opacity = 1-now;            Current_fs.css ({' Left ': left});        Previous_fs.css ({' Transform ': ' Scale (' +scale+ ') ', ' opacity ': opacity});            }, duration:800, Complete:function () {current_fs.hide ();        animating = false; },//this comes from the custom easing plugin easing: ' Easeinoutback '}); $ (". Submit"). Click (function () {return false;})
 Here we can see that the use of jquery code becomes very concise. Mainly 3 events: Next, previous, submit, and the animation effect of the fade with jquery at Next and previous