Contenido del curso
Configuración base
- 3

Configuración inicial de un foro en Laravel
04:59 min - 4

Personalizar componentes Blade con Tailwind CSS
10:26 min - 5

Primer componente Livewire en Laravel
11:10 min - 6

Categorías dinámicas con Laravel y Blade
06:18 min - 7

Migración y factory para preguntas en Laravel
05:37 min - 8

Cómo listar preguntas con Tailwind y Laravel
07:57 min - 9

Respuestas anidadas y migrate fresh en Laravel
06:26 min
Preguntas
Pregunta
Respuesta
Flujo de trabajo tradicional
Conclusiones
Campos de formulario reutilizables en Blade
Resumen
Configurar los campos de un formulario en Laravel con Blade y Tailwind CSS es uno de esos pasos que parecen sencillos, pero que marcan la diferencia entre un CRUD funcional y uno bien estructurado. Vas a aprender a habilitar un select dinámico de categorías, un input de texto y un textarea, todos reutilizables para vistas de creación y edición.
¿Cómo se estructura un formulario reutilizable en Blade?
La idea central es trabajar con un archivo de campos separado que pueda usarse tanto para crear como para editar registros. Esto te ahorra duplicar código y te permite organizar los atributos en distintas líneas para leer mejor el HTML.
En la práctica, partes de un diseño previo, copias las clases de Tailwind que ya tienes definidas y las pegas en cada campo nuevo. Así mantienes consistencia visual sin repetir estilos a mano.
¿Por qué separar los campos del formulario en un archivo aparte? Porque ese mismo archivo lo reutilizas en la vista de creación y en la de edición. Cambias una vez y se actualiza en ambos lugares.
¿Cómo armar un select dinámico con categorías en Laravel?
El primer campo es un select con name="category_id". Le aplicas las clases de borde, ancho completo (w-full), una clase para capitalizar la primera letra de cada categoría y un margen inferior para separarlo del siguiente campo [01:05].
Dentro del select necesitas dos bloques:
- Una opción inicial vacía con el texto Seleccionar categoría, que actúa como placeholder.
- Un
foreachque recorre las categorías disponibles e imprime cada una como<option>.
El valor de cada opción es el id de la categoría y el texto visible es el name. Así Laravel envía el identificador correcto al backend cuando el usuario envía el formulario.
¿Cómo marcar la categoría seleccionada al editar?
Aquí entra una condición clave dentro del foreach: si el category_id de la pregunta coincide con el id de la categoría que estás recorriendo, asignas el atributo selected a esa opción [01:50].
El resultado es que al abrir el formulario en modo edición, el select muestra automáticamente la categoría a la que pertenece el registro. Pruebas con distintas preguntas y cada una recupera su categoría correspondiente.
¿Qué hace el atributo selected en un option? Le indica al navegador cuál opción debe aparecer marcada por defecto al cargar el formulario. Es esencial para vistas de edición.
¿Cómo agregar el input de título y el textarea de descripción?
El segundo campo es un input de tipo text con name="title". Reutilizas las mismas clases del select, agregas un placeholder con el texto Título y defines el atributo value para que recupere el título de la pregunta cuando estés editando [02:30].
Al probarlo, el formulario carga el título existente y la categoría correcta al mismo tiempo. Esa es la señal de que tu binding entre modelo y vista está funcionando bien.
El tercer campo es un textarea con name="body". Aquí los detalles importantes son:
- No usa
idni atributocols, solorowspara controlar la altura. - Lleva las mismas clases de Tailwind que los campos anteriores.
- Tiene un
placeholdercon el texto Descripción del problema. - En lugar de usar
value, imprimes el contenido del campobodyentre las etiquetas de apertura y cierre del textarea.
Esa última diferencia es clave: el input usa value="...", pero el textarea recibe su contenido como texto interno.
¿Qué buenas prácticas aplicar al organizar el HTML del formulario?
Más allá de la funcionalidad, el código gana mucho cuando lo organizas con saltos de línea entre atributos. Cuando tienes muchas clases de Tailwind, ponerlas en líneas separadas hace que el formulario sea legible para ti y para quien revise el proyecto después.
Algunos puntos útiles que se aplican en la implementación:
- Centralizar las clases de estilo copiándolas desde un componente base.
- Usar
placeholderen cada campo para guiar al usuario. - Recuperar siempre los valores actuales (
title,body,category_id) para que el formulario sirva en edición. - Mantener el mismo archivo de campos para crear y editar.
Con estos tres campos listos, select, input y textarea, tienes la estructura mínima para capturar una pregunta con su categoría, título y descripción. Ahora te toca a ti: revisa cada atributo, prueba con distintos registros y comparte en los comentarios qué clases de Tailwind agregaste para personalizar tu propio formulario.