Tutorial # 12 del curso de BootStrap 3.2, en este tutorial realizaremos un ejemplo práctico del uso de formularios , construiremos una interfaz de login funcional, se crea un archivo ckeck.php el cual procesara los datos enviados por el formulario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario - Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
body {
padding-top: 40px;
padding-bottom: 40px;
}
.login {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
#sha{
max-width: 340px;
-webkit-box-shadow: 0px 0px 18px 0px rgba(48, 50, 50, 0.48);
-moz-box-shadow: 0px 0px 18px 0px rgba(48, 50, 50, 0.48);
box-shadow: 0px 0px 18px 0px rgba(48, 50, 50, 0.48);
border-radius: 6%;
}
#avatar{
width: 96px;
height: 96px;
margin: 0px auto 10px;
display: block;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container well" id="sha">
<div class="row">
<div class="col-xs-12">
<img src="img/avatar.png" class="img-responsive" id="avatar">
</div>
</div>
<form class="login" action="check.php" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Correo electrónico" name="email" required autofocus>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Contraseña" name="pass" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">iniciar sesión</button>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" value="1" name="remember"> No cerrar sesión
</label>
<p class="help-block"><a href="#">¿No puedes acceder a tu cuenta?</a></p>
</div>
</form>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>check.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Administración</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<?php
$email = $_POST["email"];
$pass = $_POST["pass"];
if($email == "juan@hotmail.com" && $pass == "123"){
?>
<div class="well">
<h3>Bienvenido JUAN</h3>
<p><a href="login.php">Salir</a></p>
</div>
<?php
}
else{
?>
<div class="alert alert-danger">El Email o contraseña son incorrectos <a href="login.php">Volver</a></div>
<?php
}
?>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Buenas arielmax, primero, darte las gracias por los tutoriales, me han sido de gran ayuda.
Me gustaria comentarte una duda, ¿porqué al aplicarle un margin auto al formulario, se centra en el contenedor?
gracias de nuevo !
esto es por una regla que incorpora boot strap para alinearo a como quieras debes crear un div con una clase y aplicar le tu estilo