Formulario Login con HTML y Bootstrap

El formulario de inicio de sesión es una parte esencial de muchas aplicaciones web y sitios. Permite a los usuarios autenticarse para acceder a contenido personalizado, realizar acciones específicas o administrar sus cuentas. Crear un formulario de inicio de sesión efectivo no solo es fundamental para la seguridad de la aplicación, sino también para proporcionar una experiencia de usuario intuitiva y fácil de usar.

En este tutorial, te enseñaré cómo construir un formulario de inicio de sesión utilizando HTML y Bootstrap. Bootstrap es uno de los frameworks de desarrollo web más populares y ampliamente utilizados en la industria. Ofrece una amplia gama de componentes de interfaz de usuario, estilos predefinidos y herramientas de diseño responsivo que facilitan la creación de interfaces atractivas y funcionales.

A través de este tutorial, aprenderás a aprovechar las clases de Bootstrap para diseñar un formulario de inicio de sesión moderno y receptivo sin necesidad de escribir mucho CSS personalizado. Esto te permitirá ahorrar tiempo y esfuerzo en el desarrollo, al tiempo que garantiza un diseño profesional y compatible con dispositivos móviles.

Ya sea que estés construyendo una aplicación web desde cero o mejorando un proyecto existente, este tutorial te proporcionará los conocimientos y las habilidades necesarias para implementar un formulario de inicio de sesión efectivo utilizando las mejores prácticas de diseño web y la potencia de Bootstrap.

¡Vamos a comenzar a construir nuestro formulario de inicio de sesión con HTML y Bootstrap!

...

Configuración del Proyecto

Antes de empezar, asegúrate de tener Bootstrap integrado en tu proyecto. En este ejemplo, estamos utilizando la versión 4.5.2 a través de un CDN.

                                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
                                    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
                                    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
                                    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>          
                                

Estructura del Formulario

El formulario de inicio de sesión consta de varios elementos, todos ellos contenidos dentro de un contenedor div con la clase container-fluid, que aprovecha todo el ancho disponible en la pantalla.

html

<div class="container-fluid d-flex justify-content-center align-items-center vh-100 bg-image" style="background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');">

Dentro de este contenedor, tenemos un div con la clase card, que proporciona un diseño de tarjeta para nuestro formulario. La clase card-body se utiliza para agrupar los elementos del formulario dentro de la tarjeta.

html

<div class="card"> <div class="card-body">

Campos de Entrada

Utilizamos la clase form-group para agrupar etiquetas de texto y campos de entrada relacionados. Cada campo de entrada está envuelto en un div con esta clase.

html

<div class="form-group"> <label for="username">Usuario:</label> <input type="text" class="form-control" id="username" name="username" required> </div>

El atributo class="form-control" se utiliza en los campos de entrada para aplicar los estilos de Bootstrap y hacer que los campos se vean uniformes y atractivos.

Botón de Inicio de Sesión

El botón de inicio de sesión utiliza la clase btn btn-primary para aplicar los estilos de Bootstrap y resaltar el botón en color azul. La clase btn-block se utiliza para hacer que el botón ocupe todo el ancho disponible.

html

<button type="submit" class="btn btn-primary btn-block">Iniciar Sesión</button>

Otros Elementos

Hemos añadido un enlace para "¿Se te olvidó el usuario o la contraseña?" y otro para "Registrar". Estos enlaces están centrados y tienen un margen superior para separarlos del resto del contenido.

Conclusión

Con estos pasos, has creado un formulario de inicio de sesión atractivo y funcional utilizando HTML y Bootstrap. Este formulario puede ser fácilmente integrado en tus proyectos web para permitir que los usuarios se autentiquen antes de acceder al contenido protegido.

¡Espero que este tutorial haya sido útil para ti!

Codigo completo

Para que no pierdas tiempo te dejo el codigo completo del formulario login

                        <!DOCTYPE html>
                        <html lang="es">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Formulario de Inicio de Sesión</title>
                        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
                        </head>
                        <body>
                        <div class="container-fluid d-flex justify-content-center align-items-center vh-100 bg-image" style="background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');">
                        
                          <div class="card">
                            <div class="card-body">
                            <h2 class="card-title text-center" style="font-family: Georgia, serif;">Iniciar Sesión</h2>
                            <img style="width: 150px;" class="mx-auto d-block rounded-circle bg-primary p-1"  src="https://w7.pngwing.com/pngs/247/564/png-transparent-computer-icons-user-profile-user-avatar-blue-heroes-electric-blue-thumbnail.png" alt="User">
                              <form>
                                <div class="form-group">
                                  <label for="username">Usuario:</label>
                                  <input type="text" class="form-control" id="username" name="username" required>
                                </div>
                                <div class="form-group">
                                  <label for="password">Contraseña:</label>
                                  <input type="password" class="form-control" id="password" name="password" required>
                                </div>
                                <button type="submit" class="btn btn-primary btn-block">Iniciar Sesión</button>
                                <p class="text-center mt-3"><a href="#">¿Se te olvidó el usuario o la contraseña?</a></p>
                                <a href="#">Registrar</a>
                              </form>
                              
                            </div>
                          </div>
                         
                        </div>
                        
                        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
                        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
                        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
                        </body>
                        </html>
                             
                    

---

Ir al indice