# Formulario El bloque básico de construcción de cualquier sitio web o aplicación es el formulario. Si no necesitas un backend de base de datos, puedes usar el generador de formularios para crear uno simple. Ideal para formularios de contacto o de opinión donde los datos no se persisten. ### Sintaxis ``` $ vela generate form [model] [fields...] ``` ``` $ vela generate form contact name:text! email:email! message:editor ``` Esto creará un formulario en `/contact` y una definición de esquema Zod para la validación. Los archivos creados son: ``` src/routes/(public)/contact/+page.svelte src/routes/(public)/contact/+page.server.ts src/routes/(public)/contact/server.test.ts src/lib/schemas/contact.ts ``` En un proyecto con shadcn-svelte, los componentes que el formulario necesite se instalan automáticamente. `sveltekit-superforms` y `zod` también se instalan si el proyecto no los tiene. La [prueba de servidor](/es/test/server) solo se escribe cuando el proyecto tiene el entorno de `vela test:server` (`supertest` instalado). El éxito se muestra como un mensaje flash cuando el proyecto tiene `sveltekit-flash-message`. Sin él, la acción devuelve el mensaje con `message()` de superforms. ### Opciones - `--remote` - Generar el formulario con remote functions de SvelteKit en lugar de sveltekit-superforms - `--route ` - Colocar el formulario en una ruta personalizada. Por defecto es el nombre del modelo bajo `(app)` cuando la autenticación está habilitada, o `(public)` cuando no lo está. En un proyecto sin ninguno de los dos grupos, va directamente en `src/routes`. - `--ui ` - Generar componentes de shadcn-svelte o elementos HTML simples. Por defecto es `shadcn` cuando el proyecto tiene shadcn-svelte, y `plain` cuando no. - `--ai ` - Diseñar el formulario con IA a partir de una descripción en lenguaje natural ### Ruta `--route` coloca el formulario en cualquier punto del árbol de rutas, incluidos los segmentos dinámicos. El esquema sigue yendo a `src/lib/schemas`. ``` $ vela generate form project name:text! description:editor --route "(app)/[team_id]/projects/new" ``` Crea: ``` src/routes/(app)/[team_id]/projects/new/+page.svelte src/routes/(app)/[team_id]/projects/new/+page.server.ts src/routes/(app)/[team_id]/projects/new/server.test.ts src/lib/schemas/project.ts ``` Recuerda la ruta que usaste — [`vela destroy form`](/es/destroy/form) necesita el mismo `--route` para volver a encontrar los archivos. ### HTML simple `--ui` es `shadcn` por defecto cuando el proyecto tiene un `components.json` y el paquete `shadcn-svelte` o `bits-ui`. Si no, el formulario usa elementos HTML simples sin clases, y no se instala ningún componente. `--ui plain` hace lo mismo en un proyecto con shadcn-svelte; `--ui shadcn` en un proyecto sin él es un error — configúralo con `npx sv add tailwindcss` y luego `npx shadcn-svelte@latest init`, o ejecuta [`vela bless`](/es/bless) para la actualización completa. En un proyecto creado con `sv create`, que no tiene grupos de rutas ni entorno de pruebas: ``` $ vela generate form contact name:text! email:email! message:editor ``` Crea: ``` src/routes/contact/+page.svelte src/routes/contact/+page.server.ts src/lib/schemas/contact.ts ``` El contenedor de cada campo tiene un atributo `data-field` con el nombre del campo, y `data-invalid` mientras el campo tiene errores. Los mensajes de error tienen `data-error`. Úsalos para dar estilo a todos los formularios generados desde una sola hoja de estilos. Sin `sveltekit-flash-message`, el mensaje de éxito se muestra encima del formulario. ### Remote functions `--remote` genera el formulario con remote functions de SvelteKit: un `form.remote.ts` ocupa el lugar de `+page.server.ts`, y las remote functions se activan en la configuración de SvelteKit. `--route` y `--ui` funcionan igual. ``` $ vela generate form --remote contact name:text! email:email! message:editor ``` Crea: ``` src/routes/(public)/contact/+page.svelte src/routes/(public)/contact/form.remote.ts src/routes/(public)/contact/server.test.ts src/lib/schemas/contact.ts ``` ### Ejemplos ``` $ vela generate form profile avatar:file bio:editor website:url ``` ``` $ vela generate form feedback rating:select(1,2,3,4,5) comment:editor ``` ### IA > Pro `--ai` diseña el formulario a partir de una descripción en lenguaje natural, en dos fases: primero el esquema, después el diseño. Pasa una descripción _en lugar de_ un nombre de modelo y campos, no además de — pasar ambos es un error. ``` $ vela generate form --ai "a feedback form with a 1-5 star rating" ``` Requiere una cuenta y un proyecto vinculado — ejecuta primero [`vela login`](/es/account/login) y [`vela link`](/es/link).