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

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