🧾 Crear formularios dinámicos con Blade

🧾 Crear formularios dinámicos con Blade

Aprende a crear formularios potentes y reutilizables en Laravel

Laravel y su motor de plantillas Blade facilitan la creación de formularios dinámicos, reutilizables y totalmente integrados con las funcionalidades del framework. En esta lección aprenderás cómo generar formularios con Blade, usar directivas específicas y conectar los datos enviados con tus controladores y modelos.

📘 ¿Qué es un formulario dinámico?

Un formulario dinámico es aquel que puede adaptarse según las condiciones del sistema, como mostrar campos adicionales según el rol del usuario, valores precargados o listas desplegables basadas en información de la base de datos.

⚙️ Creación básica de un formulario en Blade

En Laravel, los formularios se pueden construir manualmente o con la ayuda de las directivas de Blade:

<form action="{{ route('usuarios.store') }}" method="POST">
  @csrf
  <div class="mb-3">
    <label for="nombre" class="form-label">Nombre:</label>
    <input type="text" name="nombre" id="nombre" class="form-control" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Correo electrónico:</label>
    <input type="email" name="email" id="email" class="form-control" required>
  </div>

  <button type="submit" class="btn btn-success">Guardar</button>
</form>
  

La directiva @csrf genera automáticamente un token de seguridad contra ataques CSRF. Es obligatoria en cualquier formulario que envíe datos por POST.

🧠 Formularios dinámicos basados en condiciones

Con Blade puedes mostrar u ocultar campos fácilmente según condiciones lógicas. Por ejemplo, si un usuario tiene un rol específico:

@if(auth()->user()->isAdmin())
  <div class="mb-3">
    <label for="rol" class="form-label">Rol de usuario:</label>
    <select name="rol" id="rol" class="form-select">
      <option value="admin">Administrador</option>
      <option value="editor">Editor</option>
      <option value="usuario">Usuario</option>
    </select>
  </div>
@endif
  

🔄 Formularios reutilizables con componentes Blade

Laravel permite crear componentes de formulario para no repetir código. Por ejemplo, puedes definir un componente input.blade.php:

<div class="mb-3">
  <label for="{{ $id }}" class="form-label">{{ $label }}</label>
  <input type="{{ $type }}" name="{{ $name }}" id="{{ $id }}" 
         class="form-control" value="{{ old($name, $value ?? '') }}" />
</div>
  

Y luego utilizarlo así:

<x-input name="nombre" label="Nombre completo" id="nombre" type="text" />
<x-input name="email" label="Correo" id="email" type="email" />
  

Estos componentes te permiten mantener tus formularios más ordenados, legibles y fáciles de mantener.

💾 Conectando el formulario con el controlador

En el controlador, puedes procesar los datos enviados con una estructura muy simple:

public function store(Request $request)
{
    $validated = $request->validate([
        'nombre' => 'required|string|max:255',
        'email' => 'required|email|unique:usuarios'
    ]);

    Usuario::create($validated);

    return redirect()->route('usuarios.index')
                     ->with('success', 'Usuario creado correctamente.');
}
  

✅ Consejo: Combina formularios dinámicos con la validación de Laravel para obtener una experiencia fluida y segura.

🎨 Vista del formulario en el frontend

Así se verá el formulario en tu aplicación Laravel una vez renderizado:

Nombre:

Correo electrónico:

📚 En resumen:

• Usa @csrf en todos tus formularios.
• Blade permite mostrar campos condicionales fácilmente.
• Los componentes Blade simplifican la reutilización de formularios.
• Valida siempre los datos antes de guardarlos en la base de datos.

🏠 Volver al Índice ➡️ Siguiente tema: 🧭 Rutas con parámetros en Laravel