"Login & Password Reminder"
Bootstrap 3.1.0 Snippet by lmarre

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>Login & Recupera Clave ADMIN</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <style type="text/css"> </style> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script type="text/javascript"> window.alert = function(){}; var defaultCSS = document.getElementById('bootstrap-css'); function changeCSS(css){ if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); else $('head > link').filter(':first').replaceWith(defaultCSS); } $( document ).ready(function() { var iframe_height = parseInt($('html').height()); window.parent.postMessage( iframe_height, 'http://bootsnipp.com'); }); </script> <script type="text/javascript"> $(document).ready(function() { $('#olvidado').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); $('#acceso').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); }); </script> </head> <body> <div class="container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 col-lg-6 col-lg-offset-3" style="background-color:orange; "> <div class="row"> <h4 style="border-bottom: 1px solid #c5c5c5;text-align:center"> <i class="glyphicon glyphicon-user"> </i> Acceso a la aplicación back-office </h4> </div> <div style="padding: 20px;" id="form-olvidado"> <form class="form-horizontal col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3" form accept-charset="UTF-8" role="form" id="login-form" method="post" action="checklogin.php"> <fieldset> <div class="form-group input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"> </i> </span> <input class="form-control" placeholder="Usuario" name="myusername" type="text" required="" autofocus=""> </div> <div class="form-group input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"> </i> </span> <input class="form-control" placeholder="Contraseña" name="mypassword" type="password" value="" required=""> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-primary btn-block"> Acceder </button> </div> <p class="help-block" > <a class="pull-right text-muted" href="#" id="olvidado" style="font-size:12px;font-weight:bold;background-color:#ffffff;margin-right:2px;padding:4px;border-radius: 20px">Olvidó la contraseña?</a> </p> </fieldset> </form> </div> <div style="display: none;" id="form-olvidado"> <h4 class=""> Olvidó su contraseña? </h4> <div class="container" role="main"> <div class="col-md-4"> <form id="frmRestablecer" action="validaremail.php" method="post"> <div class="panel panel-default"> <div class="panel-heading"> Restaurar contraseña </div> <div class="panel-body"> <p></p> <div class="form-group"> <label for="email">Dirección de correo asociada a tu cuenta para reiniciar la contraseña </label> <input type="email" id="email" class="form-control" name="email" required> </div> <div class="form-group"> <input type="submit" class="btn btn-primary" value="Recuperar contraseña" > </div> </div> </div> </form> <div id="mensaje"></div> </div> <div class="col-md-3"></div> </div> <!-- /container --> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $("#frmRestablecer").submit(function(event){ event.preventDefault(); $.ajax({ url:'validaremail.php', type:'post', dataType:'json', data:$("#frmRestablecer").serializeArray() }).done(function(respuesta){ $("#mensaje").html(respuesta.mensaje); $("#email").val(''); }); }); }); </script> </div> </div> </body> </html>
$(document).ready(function() { $('#olvidado').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); $('#acceso').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); });

Related: See More

Gaia Bootstrap Template
Creating password field text hide show via a single class
login-form
Login Form

Questions / Comments: