3. Actions nommées
Il est possible d'avoir plusieurs formulaires différents sur une même page, mais aussi différentes actions associées.
Pour cela il faut être capable de différencier les actions que chaque <form> cible. Jusque là,
nous n'avions qu'un seul formulaire par page, et nous n'avons donc pas eu besoin de préciser quelle
action celui-ci devait cibler : il cible l'action default par défaut.
<!-- cible l'action `default` -->
<form method="POST"></form>Mais si on veut plusieurs actions, il est nécessaire de les cibler explicitement :
<form action="?/inscription" method="POST"></form>
<form action="?/connexion" method="POST"></form>Oui, le
?/est nécessaire.
Et dans ce cas, vous pouvez définir plusieurs actions dans le fichier +page.server.ts :
export const actions = {
inscription: async (event) => {},
connexion: async (event) => {}
};Si vous définissez plus d'une action par page, vous ne pourrez plus utiliser
defaultcomme nom d'action. Il faudra la renommer.
Faites bien attention à différencier les attributs
namede chaque<input>pour éviter de les mélanger.
formaction
Parfois, nous voudrions profiter des données d'un <form> donné pour faire une action différente,
sans créer un nouveau <form>. Pour cela, nous pouvons utiliser un <button> possédant un attribut
formaction ayant pour valeur le nom de l'action désirée :
<form action="?/inscription" method="POST">
<input name="email" />
<input name="password" type="password" />
<button>Inscription</button>
<button formaction="?/connexion">Connexion</button>
</form>Un même <form> peut donc envoyer ses données à des actions différentes !