[forCode]

Creación de un Login Form I: Código HTML

Breve tutorial de 4 pasos necesarios para crear un formulario de login básico; donde tocaremos HTML y CSS, animaciones y veremos como hacer resets del CSS nativo que añaden los navegadores.

Creación de un Login Form I: Código HTML

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" /></p>

        <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.

Creación de un Login Form

Compartir en: