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();
});

2 comments:

  1. Mas bisa minta ngga form di atas

    ReplyDelete
  2. I love it here. Keep sharing your good vibes. I love them Are you also searching for dissertation writing help? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank

    ReplyDelete

Blogroll

Popular Posts