13 Formulario de CREACIÓN de USUARIOS en el SISTEMA (PHP y MySql)FullStack
Duración: 9 minDescripció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].
🔐 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.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️