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é Now, the form looks like:



Ajouter une fonction de callback
Sadly, the previous code displays the form, but the form doesn't work. We need to write some logic to process the form input! Now, the form processes the submitted data:



Méthodes de soumission
The form can be set to use either the POST or GET submission method.


 * POST (default): The form fields' contents are not shown in the page URL. This method should be used for forms that change the wiki content (e.g. edit pages or block users).


 * GET: The form fields' contents are shown in the page URL. The resulting URL can be bookmarked or linked to allow others to view it. However, submission of very long forms (multiple kilobytes of text) may fail. This method should be used for forms that do not change the wiki content (e.g. show a list of pages).

if you are trying to submit the data via a GET request, you will have to add the following:

Note that GET forms using a  or   field have to have a "form identifier" set to work correctly, same as if you were using multiple forms on one page – see Using multiple forms on a single page below.

Ajouter la validation
Fields can be individually validated before submit callback.

First we tell HTMLForm by adding this line: in : Then we write the validation logic: Now, the validation logic checks submitted data before processing:



Champ obligatoire
You can specify that a field is required by simply adding to the formDescriptor. Any validation-callback will overwrite required. If you want to validate a required field, add the following logic to your validation callback function:

Ajouter le filtrage
Filtering happens BEFORE validation to change input.

formDescriptor declaration: Filtering logic:

Ajouter la prise en charge de i18n (internationalisation)
Replacing 'label' by 'label-message' in formDescriptor will automatically fetch the string through i18n routine: Don't forget to add the correct entry in the localization files: For example here, English and French... For the submit button, we need to do it "manually": Of course, as always, you'll need to add the myform-submit entry in the localization files.

Ajouter des sections
Now, we need to add some fields and organize them, let's switch to a bigger formDescriptor.

The section string displayed is automatically fetched from the localization files. Here we therefore need to add this in en.json :

Now, the form looks like:



Cas des sous-sections
Sections can be easily nested with the incredible power of /.

Les ID i18n seront comme :

Maintenant le formulaire ressemble à :



Ajouter un texte d'aide
What about providing users with instructions to use your form easily? or help-message (an i18n message name) are here for you.

Maintenant le formulaire ressemble à :



Ajouter CLASS et ID html
and  are here for you.

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