Form
Form component wrapper with automatic CSRF protection and HTTP method spoofing support
Basic Usage
The most basic form component with POST method by default:
<neura::form action="/submit" method="POST">
<neura::input name="email" type="email" placeholder="Email" />
<neura::button type="submit">Submit</neura::button>
</neura::form>HTTP Methods
The form component supports all HTTP methods with automatic CSRF handling and method spoofing:
GET Method
POST Method (Default)
PUT Method
PATCH Method
DELETE Method
<!-- GET -->
<neura::form action="/search" method="GET">...</neura::form>
<!-- POST (default) -->
<neura::form action="/users" method="POST">...</neura::form>
<!-- PUT, PATCH, DELETE (avec @method automatique) -->
<neura::form action="/users/1" method="PUT">...</neura::form>
<neura::form action="/users/1" method="PATCH">...</neura::form>
<neura::form action="/users/1" method="DELETE">...</neura::form>Custom Spacing
Customize spacing between form elements with the spacing attribute:
<neura::form action="/submit" spacing="space-y-4">
<!-- Contenu avec espacement personnalisé -->
</neura::form>Complete Form Example
Complete form example with all elements:
<neura::form action="/users" method="POST">
<neura::input name="name" placeholder="Full Name" />
<neura::input name="email" type="email" placeholder="Email Address" />
<neura::input name="password" type="password" placeholder="Password" />
<neura::button type="submit" class="w-full">Create Account</neura::button>
</neura::form>Best Practices
✓ Do
- Toujours spécifier l'attribut action pour définir l'URL de soumission
- Utiliser la méthode appropriée (GET pour les recherches, POST pour les créations, etc.)
- Laisser le composant gérer automatiquement le CSRF et les méthodes spoofing
- Utiliser l'attribut spacing pour personnaliser l'espacement entre les champs
✗ Don't
- Ne pas ajouter manuellement @csrf - c'est géré automatiquement
- Ne pas ajouter manuellement @method - c'est géré automatiquement pour PUT, PATCH, DELETE
- Ne pas utiliser POST pour des actions qui ne modifient pas de données (utiliser GET)
- Ne pas oublier l'attribut action
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| method | string | 'POST' | HTTP method (GET, POST, PUT, PATCH, DELETE). PUT, PATCH, DELETE methods automatically use @method |
| action | string|null | null | Form submission URL |
| spacing | string | 'space-y-6' | Classes CSS pour l'espacement entre les éléments (passé via l'attribut class ou spacing) |