🧾 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:

📚 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

🧾 Crear formularios dinámicos con Blade