Manual:HTMLForm Tutorial 2/fr

La suite de cette page concerne l'utilisation de HTMLForm à travers les entrées génériques de  (valeurs communes à tous les types de champs). Nous allons donc travailler uniquement avec l'entrée HTMLTextField.

Sauter la partie générique et aller directement aux chapîtres de spécification des champs

Ici nous sommes dans Et nous travaillons avec la fonction  ...

Ajouter un texte simple
Nous souhaitons remplacer « Hello World » par un champ de texte appelé Maintenant le formulaire ressemble à :



Ajouter une fonction de callback
Malheureusement, le code précédent affiche le formulaire, mais celui-ci ne fonctionne pas. Il faut écrire la logique qui va traiter l'entrée ! Maintenant le formulaire peut traiter les données saisies :



Méthodes de soumission
Le formulaire peut être configuré pour utiliser les méthodes d'envoi POST ou GET.


 * POST (par défaut): le contenu des champs du formulaire n'apparaissent pas dans l'URL de la page. Cette méthode doit être utilisée pour les formulaires qui modifient le contenu du wiki (par exemple les modifications de pages ou le blocage d'utilisateurs).


 * GET: le contenu des champs du formulaire apparaissent dans l'URL de la page. L'URL résultante peut être ajoutée au marque-pages ou être utilisée comme un lien pour permettre aux autres utilisateurs de la voir. Néanmoins cette méthode peut échouer avec de très longs formulaires (plusieurs kilo-octets de texte). Elle doit être utilisée pour des formulaires qui ne modifient pas le contenu du wiki (par exemple pour l'affichage d'une liste de pages).

Pour envoyer les données via une requête GET, vous devez ajouter ce qui suit :

Pour fonctionner correctement notez que les formulaires GET qui utilisent un champ  ou   doivent avoir un  « identifiant de formulaire » initialisé, de la même façon que lorsque vous utilisez plusieurs formulaires sur une même page – voir Utiliser plusieurs formulaires sur la même page ci-dessous.

Ajouter la validation
Les champs peuvent être contrôlés individuellement avant d'exécuter la fonction de callback.

D'abord il faut le dire à HTMLForm en ajoutant cette ligne : dans : Puis écrivez la logique de validation : Maintenant, la logique de validation vérifie les données soumises avant de les traiter :



Champ obligatoire
Vous pouvez spécifier qu'un champ est obligatoire simplement en ajoutant : dans le formDescriptor. Tout validation-callback se substitue au caractère obligatoire. Si vous voulez valider un champ nécessaire, ajoutez la logique suivante à votre fonction callback de validation :

Ajouter un filtrage
Le filtrage modifie l'entrée et se produit AVANT la validation.

Déclaration correspondante dans formDescriptor : Logique de fltrage :

Ajouter l'internationalisation (prise en charge de i18n)
Replacer 'label' par 'label-message' dans formDescriptor va automatiquement chercher la chaîne traduite à travers les routines i18n : N'oubliez pas d'ajouter l'entrée correspondante dans les fichiers de localisation : Par exemple, ici en anglais et en français... Pour le bouton submit, il faut le faire « manuellement » : bien sûr, comme toujours, ajoutez l'entrée myform-submit dans les fichiers de localisation.

Ajouter des sections
Maintenant il nous faut ajouter des champs supplémentaires et les organiser; passons à un formDescriptor un peu plus conséquent.

La chaîne de la section affichée est automatiquement récupérée à partir des fichiers de localisation. C'est pourquoi à ce niveau nous devons l'ajouter dans en.json :

Maintenant le formulaire ressemble à :



Cas des sous-sections
Les sections peuvent être facilement imbriquées grâce à la puissance incroyable de /.

Les ID i18n ressembleront à :

Maintenant le formulaire ressemble à :



Ajouter un texte d'aide
Et que pensez-vous de fournir une aide pour que les utilisateurs puissent se servir de votre formulaire facilement ? ou help-message (un nom de message i18n) sont faits pour vous.

Maintenant le formulaire ressemble à :



Ajouter CLASS et ID html
et  sont faits pour cela.

Modifier le nom de l'entrée
By default, input name is, for the previous example, the input name is therefore. This can be changed with : Just to give you an idea, here is the HTML output generated:

Désactiver les entrées
disabled is there and the user cannot copy (CTRL-C) input. The item will not be valid for submission. As simple as that!

Mettre les entrées en lecture seule
readonly is there, and the user can copy (CTRL-C) input. Encore une fois, aussi simple que cela !

Utiliser des fomulaires multiples sur une seule page
If you use multiple forms on a single special page (e.g. one to show search results, and another to modify a result), you need to set a "form identifier" to allow HTMLForm to detect which of the forms was submitted. The identifier can be any string, and it must be different for every form.

For technical reasons, this is also necessary when using a  or   field in a GET form; otherwise HTMLForm can't detect whether the form was submitted and therefore whether it should load the default values or not.

PAGE SUIVANTE DU TUTORIEL