This article was inspired by Google Login Form UI. This below UI is simple and it displays Login, Register and Forgot-Password panel in on same screen.

Form Structure

<form class="panel" id='login' action='' method='post'>
    ..........
</form>
<form class="panel" id='forgotpassword' action='' method='post'>
    ..........
</form>
<form class="panel" id='register' action='' method='post'>
    .........
</form>

Switch Panel Triggers 

<a class="switchPanelButton" panelclass="panel" panelid="forgotpassword" href="#"> Forgot password </a>

jQuery Code to Switch Panels 

$(".switchPanelButton").click(function(event){
    event.preventDefault();
    var panel = $(this).attr('panelclass');
    $("."+panel).hide();
    var panelid = $(this).attr('panelid');
    $("#"+panelid).show();
});

0 comments:

Blogroll

Follow this blog by Email

Popular Posts