13 Formulario de CREACIÓN de USUARIOS en el SISTEMA (PHP y MySql)FullStack

Duración: 9 min
Módulo: 👤 CRUD de Usuarios y UX Avanzada Lección 5 de 17

Descripción

✍️ Lección 13: Formulario de Creación de Usuarios con Bootstrap

Título del Video: 13 Formulario de CREACIÓN de USUARIOS en el SISTEMA (PHP y MySql) FullStack

Esta lección se enfoca en la construcción del formulario HTML para el registro de nuevos usuarios, aplicando los estilos de Bootstrap y la estructura de seguridad esencial de Laravel para preparar el envío de datos al controlador.

🧱 Estructura del Formulario (HTML y Bootstrap)

El formulario se construye dentro de la estructura Card definida en la lección anterior, utilizando el sistema de grillas de Bootstrap para una disposición visualmente ordenada.

  • Contenedor y Columnas: Se utiliza un <div> de clase row (fila) y se define que el formulario ocupe una columna de seis espacios (col-md-6) para no abarcar todo el ancho de la pantalla, manteniendo un diseño limpio [00:46].
  • Campos de Entrada (Inputs): Cada campo se envuelve en un <div> con la clase form-group (de Bootstrap) y el elemento <input> usa la clase form-control para aplicar el estilo visual moderno [01:06].
    • Nombre (name): Tipo text.
    • Correo Electrónico (email): Tipo email (para ayudar al navegador a reconocerlo) [01:55].
    • Contraseña (password): Tipo password para ocultar los caracteres mientras se escribe [05:20].
    • Verificación de Contraseña (password_verify): Tipo password [02:24].

🔐 Seguridad y Envío de Datos (Laravel)

Se implementan los elementos de seguridad requeridos por Laravel para el envío de formularios.

  • Etiqueta <form>: El formulario se envuelve en la etiqueta <form> con el método POST (method="POST"), que es el más seguro para el envío de datos, ya que no expone la información sensible en la URL [06:17].
  • Token CSRF: Es crucial incluir la directiva @csrf de Blade dentro del formulario. Esta directiva genera un token oculto que Laravel utiliza para proteger la aplicación contra ataques de falsificación de peticiones en sitios cruzados (Cross-Site Request Forgery) [06:54].
  • Atributo name: Se asigna un atributo name a cada campo de entrada (ej. name="email", name="password"). Es fundamental que estos nombres coincidan con los campos de la base de datos para facilitar el manejo de datos en el backend [07:31].

🎨 Botones de Acción (Diseño Elegante)

Se definen y estilizan los botones para la acción de envío y cancelación.

  • Botón Registrar Usuario: Es de tipo submit (type="submit") y utiliza la clase btn-primary de Bootstrap para un color azul, indicando la acción principal [03:44].
  • Botón Cancelar: Se usa la etiqueta <a> (con href a la ruta de listado) y se le asigna la clase btn-secondary de Bootstrap para un color gris, indicando una acción secundaria y permitiendo al usuario volver a la vista anterior [03:19].
  • Validación Visual: Se añade un asterisco (*) junto a la etiqueta de cada campo para indicar visualmente que son campos obligatorios (validación frontend) [04:50].

El próximo paso será definir la acción (action) del formulario para enviarlo al controlador y gestionar la lógica de validación y registro de datos en el backend.