HTML5/CSS3-Beispielcode-Sharing zur Implementierung eines schönen Schritt-für-Schritt-Registrierungs- und Anmeldeformulars

Es gibt mittlerweile viele Schritt-für-Schritt-Anmelde- und Registrierungsformulare, hauptsächlich um die Benutzererfahrung zu verbessern. Benutzer können die entsprechenden Formularinformationen gezielt ausfüllen, sodass Benutzer nicht durch den Anblick einer Vielzahl von Formularen entmutigt werden. Was ich heute mit Ihnen teile, ist ein Schritt-für-Schritt-Registrierungs- und Anmeldeformular basierend auf HTML5 und CSS3. Es sieht natürlich sehr schön aus. Sie werden es wissen, wenn Sie sich die DEMO ansehen.

Als nächstes werfen wir einen Blick auf den Umsetzungsprozess. Der Code ist etwas kompliziert und besteht hauptsächlich aus HTML-Code, CSS3-Code und Javascript-Code.

HTML-Code:

<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li>Account Setup</li>
        <li>Social Profiles</li>
        <li>Personal Details</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2>Create your account</h2>
        <h3>This is step 1</h3>
        <input type="text" name="email" placeholder="Email" />
        <input type="password" name="pass" placeholder="Password" />
        <input type="password" name="cpass" placeholder="Confirm Password" />
        <input type="button" name="next" value="Next" />
    </fieldset>
    <fieldset>
        <h2>Social Profiles</h2>
        <h3>Your presence on the social network</h3>
        <input type="text" name="twitter" placeholder="Twitter" />
        <input type="text" name="facebook" placeholder="Facebook" />
        <input type="text" name="gplus" placeholder="Google Plus" />
        <input type="button" name="previous" value="Previous" />
        <input type="button" name="next" value="Next" />
    </fieldset>
    <fieldset>
        <h2>Personal Details</h2>
        <h3>We will never sell it</h3>
        <input type="text" name="fname" placeholder="First Name" />
        <input type="text" name="lname" placeholder="Last Name" />
        <input type="text" name="phone" placeholder="Phone" />
        <textarea name="address" placeholder="Address"></textarea>
        <input type="button" name="previous" value="Previous" />
        <input type="submit" name="submit" value="Submit" />
    </fieldset></form>

Der HTML-Code sieht viel aus, ist aber sehr einfach und beschreibt hauptsächlich ein Formular.

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*/
    content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  
#progressbar li.active:after{
    background: #27AE60;
    color: white;
}

Hier haben wir gerade den CSS-Code zum Rendern des Formulars gepostet, wodurch unser Formular sehr frisch und natürlich aussieht. Ein weiterer zu beachtender Punkt ist, dass wir hier das :before-Attribut von CSS3 verwenden.

Der letzte ist Javascript-Code, der den Schrittsprung des Registrierungsformulars realisieren kann.

Javascript-Code:

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var 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)).addClass("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;
})

Hier können wir sehen, dass die Verwendung von jQuery-Code sehr einfach wird. Es gibt hauptsächlich 3 Ereignisse: Next, Previous und Submit. Gleichzeitig wird jQuery verwendet, um den Ein- und Ausblendeffekt Animation in Next und Previous zu erzielen ? Schließlich können Sie auch den Quellcode herunterladen.

Das obige ist der detaillierte Inhalt vonHTML5/CSS3-Beispielcode-Sharing zur Implementierung eines schönen Schritt-für-Schritt-Registrierungs- und Anmeldeformulars. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!