Formulario Modal de Login

Jorge Catalao febrero 24, 2023
Icono de Usuario

Iniciar Sesión

¿Olvidaste tu Contraseña?
¿No tienes cuenta? Regístrate aquí

Tutorial: Creando un Modal de Inicio de Sesión Moderno con Bootstrap

En el panorama actual del desarrollo web, crear **interfaces de usuario amigables y visualmente atractivas** es primordial. Un elemento común en casi todas las aplicaciones web es un formulario de inicio de sesión. Si bien un enfoque básico con HTML y CSS personalizado puede funcionar, aprovechar un *framework* como **Bootstrap** puede mejorar significativamente la calidad, la capacidad de respuesta y la mantenibilidad de tu código.

Este tutorial te guiará a través de la transformación de un modal de inicio de sesión tradicional, basado en CSS personalizado, en un modal de Bootstrap elegante, eficiente y adaptable. Dejaremos de lado los estilos personalizados y optimizaremos el JavaScript, lo que resultará en una implementación más limpia y profesional.

---

¿Por Qué Elegir Bootstrap para Tu Modal de Inicio de Sesión?

Bootstrap es el *framework* CSS más popular para desarrollar sitios web responsivos y *mobile-first*. Aquí te explicamos por qué es una excelente opción para un modal de inicio de sesión, y en general para el desarrollo web:

  • **Responsividad de Fábrica**: Bootstrap está construido con un enfoque *mobile-first*, lo que significa que tu modal se verá y funcionará perfectamente en cualquier dispositivo, desde un pequeño *smartphone* hasta un monitor de escritorio grande, sin esfuerzo adicional.
  • **Consistencia y Profesionalismo**: Proporciona un conjunto de componentes y estilos prediseñados, lo que asegura una apariencia coherente en toda tu aplicación. Esta consistencia le da una imagen profesional a tu interfaz.
  • **Tiempo de Desarrollo Reducido**: Al ofrecer componentes listos para usar como modales, formularios y botones, Bootstrap reduce drásticamente el tiempo de desarrollo. No necesitas escribir CSS personalizado para cada elemento.
  • **Fácil Personalización**: Aunque ofrece estilos predeterminados, Bootstrap es altamente personalizable. Puedes sobrescribir fácilmente sus variables y clases para que coincidan con las directrices de diseño específicas de tu marca.
  • **Comunidad y Documentación**: Con una comunidad enorme, encontrar ayuda y recursos es sencillo. Su documentación exhaustiva también es un gran activo para los desarrolladores.
  • **Accesibilidad**: Los componentes de Bootstrap están diseñados pensando en la accesibilidad, lo que te ayuda a crear aplicaciones web que pueden ser utilizadas por un público más amplio.
---

La Transformación: De CSS Personalizado a la Elegancia de Bootstrap

Veamos la transformación central desde el modal original con estilos personalizados a su contraparte de Bootstrap.

Enfoque Original (HTML con estilos en línea y CSS personalizado):

El código original dependía de un gran bloque de CSS personalizado para definir la apariencia de cada elemento: entradas de texto, botones, el propio modal e incluso animaciones. Aunque funcional, este enfoque puede volverse engorroso a medida que un proyecto crece.

Fragmento HTML original para el modal:

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

<div id="id01" class="modal">
    <form style="width:300px" class="modal-content animate" action="/action_page.php" method="post">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
            <img style="width:100px" src="https://glenfarrow.co.uk/wp-content/uploads/User-icon.png" alt="Avatar" class="avatar">
        </div>
        <!-- ... resto del formulario ... -->
    </form>
</div>

CSS personalizado original (contenido del `<style>`):

body { font-family: Arial, Helvetica, sans-serif; }
/* Campos de entrada de ancho completo */
input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }
/* Establecer un estilo para todos los botones */
button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; }
/* ... muchos más estilos personalizados ... */
/* Por ejemplo:
.modal { display: none; position: relative; margin: auto; z-index: 1; ... }
.modal-content { background-color: #fefefe; margin: 5% auto; border: 1px solid #888; width: 80%; ... }
*/

JavaScript personalizado original:

<script>
    var modal = document.getElementById('id01');
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

Esta configuración original requería una cantidad significativa de estilo manual y JavaScript para gestionar la visualización del modal. Cada detalle, desde el relleno hasta los colores de los botones y los efectos al pasar el ratón, tenía que definirse explícitamente.

---

La Solución Bootstrap: Código Más Limpio, Mejor Diseño

Al integrar Bootstrap, eliminamos la necesidad de un CSS personalizado extenso y simplificamos el JavaScript. Las clases predefinidas de Bootstrap se encargan del estilo y la interactividad, dejándote un HTML más limpio y semántico.

Refactorización Paso a Paso:

1. Incluir Bootstrap:

Primero, añadimos los enlaces CSS y JavaScript necesarios de Bootstrap a nuestro HTML. Es crucial incluir jQuery y Popper.js ya que son dependencias esenciales para los componentes interactivos de Bootstrap como los modales.

<!-- En la sección <head> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- Al final de la sección <body> -->
<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>

2. Botón de Activación:

El botón "Iniciar Sesión" ahora utiliza los atributos `data-toggle` y `data-target` de Bootstrap para vincularse directamente al modal, eliminando el JavaScript `onclick`. Observa las clases `btn btn-primary`, que instantáneamente le dan al botón un aspecto profesional y temático.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
    Iniciar Sesión
</button>

3. Estructura del Modal:

El modal en sí se reestructura completamente para seguir las convenciones de Bootstrap. El `div` principal del modal obtiene clases como `modal` y `fade`, y un `id` único (`loginModal`) que coincide con el `data-target`. Dentro, `.modal-dialog` con `modal-dialog-centered` asegura que el modal esté centrado verticalmente. `.modal-content` es el contenedor principal para el contenido del modal. `.modal-header`, `.modal-body` y `.modal-footer` definen las secciones distintas.

<!-- Modal de Inicio de Sesión -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header d-flex flex-column align-items-center border-0 pb-0">
                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">×</span>
                </button>
                <img src="https://glenfarrow.co.uk/wp-content/uploads/User-icon.png" alt="Avatar" class="mb-3 rounded-circle" style="width: 100px;">
                <h5 class="modal-title" id="loginModalLabel">Iniciar Sesión</h5>
            </div>
            <div class="modal-body">
                <form action="/action_page.php" method="post">
                    <div class="form-group">
                        <label for="uname"><b>Nombre de Usuario</b></label>
                        <input type="text" class="form-control" placeholder="Introduce tu Nombre de Usuario" name="uname" required>
                    </div>
                    <div class="form-group">
                        <label for="psw"><b>Contraseña</b></label>
                        <input type="password" class="form-control" placeholder="Introduce tu Contraseña" name="psw" required>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">Iniciar Sesión</button>
                    <div class="form-check mt-3">
                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember" checked>
                        <label class="form-check-label" for="rememberMe">Recordarme</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer d-flex justify-content-between align-items-center bg-light border-0 pt-0">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                <div>
                    <span class="mr-3">¿Olvidaste tu <a href="#">Contraseña?</a></span>
                    <a href="#" class="btn btn-secondary">Registrarse</a>
                </div>
            </div>
        </div>
    </div>
</div>

4. Estilo del Contenido:

Todos los elementos internos se estilizan con clases de Bootstrap: la **imagen del avatar** se centra en el encabezado usando `d-flex flex-column align-items-center` y se estiliza con `rounded-circle` (y un estilo en línea `width` para el tamaño del avatar). Las **entradas del formulario** usan `form-group` para el espaciado y `form-control` para el estilo de ancho completo. Los **botones** dentro del modal utilizan las diversas clases `btn` de Bootstrap (por ejemplo, `btn-success`, `btn-danger`, `btn-secondary`). La casilla de verificación "Recordarme" utiliza `form-check` y `form-check-input`/`form-check-label` para una alineación y estilo adecuados. El **pie de página del modal** utiliza `d-flex justify-content-between align-items-center` para espaciar elegantemente los botones de cancelar y registrar.

5. Eliminar CSS y JavaScript Personalizados:

Con Bootstrap haciendo el trabajo pesado, todas las reglas CSS personalizadas y el JavaScript para abrir/cerrar el modal se vuelven redundantes y pueden eliminarse por completo.

---

Código Completo de la Solución Bootstrap (sin CSS personalizado)

Aquí tienes el código completo y optimizado para tu modal de inicio de sesión impulsado por Bootstrap. Puedes copiarlo y pegarlo directamente en un archivo HTML.

<!-- Inicia aquí el código HTML completo --> 
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal de Inicio de Sesión con Bootstrap</title>
    <!-- CSS de Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="container mt-5">
        <p>Este es un formulario modal para iniciar sesión, con dos botones: uno para cancelar y otro para registrarse, en caso de que el usuario no esté aún registrado.</p>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
            Iniciar Sesión
        </button>

        <!-- Modal de Inicio de Sesión -->
        <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header d-flex flex-column align-items-center border-0 pb-0">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">×</span>
                        </button>
                        <img src="https://glenfarrow.co.uk/wp-content/uploads/User-icon.png" alt="Avatar" class="mb-3 rounded-circle" style="width: 100px;">
                        <h5 class="modal-title" id="loginModalLabel">Iniciar Sesión</h5>
                    </div>
                    <div class="modal-body">
                        <form action="/action_page.php" method="post">
                            <div class="form-group">
                                <label for="uname"><b>Nombre de Usuario</b></label>
                                <input type="text" class="form-control" placeholder="Introduce tu Nombre de Usuario" name="uname" required>
                            </div>
                            <div class="form-group">
                                <label for="psw"><b>Contraseña</b></label>
                                <input type="password" class="form-control" placeholder="Introduce tu Contraseña" name="psw" required>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">Iniciar Sesión</button>
                            <div class="form-check mt-3">
                                <input type="checkbox" class="form-check-input" id="rememberMe" name="remember" checked>
                                <label class="form-check-label" for="rememberMe">Recordarme</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer d-flex justify-content-between align-items-center bg-light border-0 pt-0">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                        <div>
                            <span class="mr-3">¿Olvidaste tu <a href="#">Contraseña?</a></span>
                            <a href="#" class="btn btn-secondary">Registrarse</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JS de Bootstrap y dependencias -->
    <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>
<!-- Termina aquí el código HTML completo -->
---

Conclusión

Al migrar nuestro modal de inicio de sesión a Bootstrap, hemos logrado varias mejoras significativas:

  • **Código Más Limpio y Mantenible**: Menos CSS personalizado significa menos líneas de código que escribir y administrar.
  • **Mayor Capacidad de Respuesta**: El modal ahora se adapta sin problemas a diferentes tamaños de pantalla.
  • **Estética Profesional**: Los componentes prediseñados de Bootstrap le dan al modal un aspecto pulido y moderno.
  • **Mayor Velocidad de Desarrollo**: Reutilizar los componentes de Bootstrap permite un prototipado y desarrollo más rápidos.
  • **Mejor Experiencia de Usuario**: Un diseño consistente y responsivo se traduce en una mejor experiencia para tus usuarios.

Este ejemplo demuestra claramente cómo Bootstrap puede cambiar las reglas del juego para el desarrollo web, permitiéndote concentrarte en la funcionalidad en lugar de empantanarte en intrincados detalles de estilo. ¡Aprovecha los *frameworks* como Bootstrap para construir aplicaciones web de alta calidad, eficientes y visualmente atractivas!

¿Hay algún otro componente web que te gustaría ver transformado con Bootstrap?

Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias