En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4.
Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña.
Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código.
Diseño de formulario de login con Bootstrap 4
Nuestro formulario debe ser responsivo, así que en dispositivos como computadoras o iPads (de manera horizontal) debería ocupar un espacio pequeño en el centro; y en dispositivos de pantallas pequeñas debería abarcar todo el ancho.
Para lograr esto utilizamos las clases de offset y las clases de columnas, que básicamente empujan el formulario 4 columnas a la derecha en pantallas anchas; el formulario ocupa 4 y sobran 4 (ya que son 12 columnas en total); dándole un centrado.
En las versiones de pantallas pequeñas especificamos un col-12 para que ocupe todo el ancho.
<!doctype html>
<html lang="es">
<!--
Ejemplo de formulario de login con Bootstrap
Basado en:
Plantilla inicial de Bootstrap 4
@author parzibyte
Visita: parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Formulario de login con Bootstrap">
<meta name="author" content="Parzibyte">
<title>Formulario de login con Bootstrap</title>
<!-- Cargar el CSS de Boostrap-->
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container my-auto">
<div class="row">
<div id="login" class="col-lg-4 offset-lg-4 col-md-6 offset-md-3
col-12">
<h2 class="text-center">Bienvenido de nuevo</h2>
<img class="img-fluid mx-auto d-block rounded"
src="https://picsum.photos/id/870/300/200" />
<form>
<div class="form-group">
<label for="correo">Correo</label>
<input id="correo" name="correo"
class="form-control" type="email"
placeholder="Correo electrónico">
</div>
<div class="form-group">
<label for="palabraSecreta">Contraseña</label>
<input id="palabraSecreta" name="palabraSecreta"
class="form-control" type="password"
placeholder="Contraseña">
</div>
<button type="submit" class="btn btn-primary mb-2">
Entrar
</button>
<br>
<a href="#">Contraseña olvidada</a>
</form>
</div>
</div>
</main>
</body>
</html>Para definir cada input agregamos un div con la clase form-group, y cada input debe tener la clase form-control.
El botón es un simple botón con la variante de primary. También he colocado una imagen centrada y con los bordes redondados para adornar el login, la cual es totalmente opcional.
El procesamiento del login puede hacerse con cualquier lenguaje o framework, ya sea del lado del cliente o del lado del servidor. Hace algún tiempo hice un ejemplo con PHP, y uno con PHP y MySQL.
Al final el login queda como se ve a continuación:
Interesante web. Me gusta especialmente el diseño y la información útil.