En el siguiente tutorial, tenemos como objetivo crear un formulario de login básico y rápido que podamos reutilizar en nuestros proyectos. Serán un conjunto de posts en los que iremos explicando paso a paso el desarrollo del mismo.
Código HTML
En el siguiente código HTML, como podréis comprobar, introducimos los distintos elementos que pedimos en el login. En nuestro caso, pedimos el «Username» y el «Password»; y damos la opción al cliente de que se quede la sesión iniciada. Como no, también tendremos el botón de Login.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- Title Page --> <title>Login</title> <!-- CSS --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="container"> <form> <!-- Username --> <label for="name">Username:</label> <input type="name"> <!-- Password --> <label for="username">Password:</label> <p><a href="#">Forgot your password?</a> <input type="password"> <div id="lower"> <input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> <!-- Submit Button --> <input type="submit" value="Login"> </div> </form> </div> </body> </html>
Esto es todo por hoy, en el siguiente post daremos un poco de estilo a este formulario, para luego darle ya el toque definitivo.