Manuel:Tutoriel HTMLForm 3e partie
Il est possible de générer n'importe quel type de champ avec HTMLForm; les options spécifiques à chaque champ sont décrites ici. Les options génériques (celles qui se rapportent à tous les champs) sont décrites dans le Tutoriel 2.
Introduction
Dans $formDescriptor, il existe deux manières de déclarer un type de champ : par la class ou par le type.
Utiliser l'attribut class
Vous pouvez d'abord initialiser l'attribut class (ne mélangez ni ne confondez pas avec cssclass)
'class' => 'HTMLTextField'
- HTMLTextField: Un champ texte simple.
- HTMLFloatField: Un champ texte simple avec un nombre flottant validé
- HTMLIntField: Un champ texte simple avec un nombre entier validé
- HTMLUserTextField: Un champ texte simple pour les noms d'utilisateur
- HTMLTextAreaField: Un champ texte étendu
- HTMLSelectField: Un menu déroulant vers le bas
- HTMLSelectOrOtherField: Un menu déroulant vers le bas avec une option 'autre' contrôlant un champ texte simple
- HTMLSelectAndOtherField: Un menu déroulant vers le bas et un champ texte simple
- HTMLMultiSelectField: Liste de cases à cocher
- HTMLRadioField: Boutons radio
- HTMLCheckField: Case à cocher unique
- HTMLCheckMatrix: Matrice à deux dimensions de cases à cocher
- HTMLInfoField: Simplement du texte sans entrée possible
- HTMLSubmitField: Bouton submit supplémentaire (HTMLForm affiche toujours un bouton par défaut)
- HTMLHiddenField: Champ caché (données à ne pas envoyer; elles ne sont pas affichées ni modifiées)
- HTMLTagFilter: Filtre de balises
- HTMLSizeFilterField: Filtre de la taille du fichier
- HTMLUsersMultiselectField: Selectionner plusieurs utilisateurs
- HTMLTitleTextField: Boîte de texte pour récupérer le nom de la page
- HTMLDateTimeField: Sélecteur de date et d'heure
Utiliser l'attribut type
Dans la partie précédente nous avons utilisé class; ici nous allons utiliser type qui est un raccourci de class, mais class a la priorité. C'est pourquoi vous ne devez jamais utiliser les deux en même temps !
'type' => 'text'
- text: HTMLTextField
- password: HTMLTextField
- textarea: HTMLTextAreaField
- select: HTMLSelectField
- radio: HTMLRadioField
- multiselect: HTMLMultiSelectField
- check: HTMLCheckField
- checkmatrix: HTMLCheckMatrix
- int: HTMLIntField
- float: HTMLFloatField
- info: HTMLInfoField
- selectorother: HTMLSelectOrOtherField
- selectandother: HTMLSelectAndOtherField
- submit: HTMLSubmitField
- hidden: HTMLHiddenField
- tagfilter: HTMLTagFilter
- sizefilter: HTMLSizeFilterField
- user: HTMLUserTextField
- usersmultiselect: HTMLUsersMultiselectField
- url: HTMLTextField
- title: HTMLTitleTextField
- date: HTMLDateTimeField
- time: HTMLDateTimeField
- datetime: HTMLDateTimeField
- limitselect: HTMLSelectField
- email: HTMLTextField (pour la validation HTML5 côté client; il n'y a pas de validation côté serveur ici!)
- toggle: HTMLCheckField similaire à check, mais avec l'utilisation de
'invert' => true
, l'état par défaut peut être vérifié - edittools: HTMLEditTools insère unn message système, un contenu analysé de MediaWiki:Edittools
Ce que l'on peut réaliser :
Le code suivant construit ce formulaire :
text
Un simple texte appelé 'text' :
$formDescriptor = [
'text' => [
'type' => 'text',
'label' => 'text',
// valeur par défaut du champ
'default' => 'Valeur par défaut',
// afficher la taille du champ
'size' => 10,
// longueur maximale de l'entrée
'maxlength'=> 7,
]
];
password
Un champ texte affiché comme un champ de mot de passe appelé 'password' :
$formDescriptor = [
'password' => [
'type' => 'password',
'label' => 'password',
// valeur par défaut du champ
'default' => '',
// afficher la taille du champ
'size' => 16,
// longueur maximale de l'entrée
'maxlength'=> 16,
]
];
float
Un champ texte validé seulement pour des nombres flottants appelé 'float' :
$formDescriptor = [
'float' => [
'type' => 'float',
'label' => 'float',
// valeur par défaut du champ (recommendation: mettre un flottant par défaut)
'default' => 41.976,
// afficher la taille du champ
'size' => 8,
// longueur maximale de l'entrée
'maxlength'=> 6,
// valeur minimale de l'entrée
'min' => 41,
// valeur maximale de l'entrée
'max' => 43,
]
];
int
Un champ texte validé uniquement pour des entiers appelé 'int' :
$formDescriptor = [
'int' => [
'type' => 'int',
'label' => 'int',
// valeur par défaut du champ (recommendation: mettre un entier par défaut)
'default' => 1789,
// afficher la taille du champ
'size' => 4,
// longueur maximale de l'entrée
'maxlength'=> 4,
// valeur minimale de l'entrée
'min' => 0,
// valeur maximale de l'entrée
'max' => 2011,
]
];
textarea
Un champ texte étendu appelé 'textarea' :
$formDescriptor = [
'textarea' => [
'type' => 'textarea',
'label' => 'textarea',
// valeur par défaut du champ
'default' => 'Valeur par défaut',
// nombre de lignes (hauteur du champ)
'rows' => 3, // afficher la hauteur du champ
]
]
select
Un menu déroulant vers le bas appelé 'select' :
$formDescriptor = [
'select' => [
'type' => 'select',
'label' => 'select',
// options disponibles dans ce menu (affiché => valeur)
'options' => [
'Option 0' => 0, // dépend de la manière de voir mais clés et valeurs sont ici mélangées
'Option 1' => 1, // "Option 1" est le contenu affiché, "1" est la valeur
'Option 2' => 'option2id', // Résultat HTML = <option value="option2id">Option 2</option>
]
]
];
selectorother
Un menu déroulant vers le bas avec une option 'autre' qui gère un champ texte simple appelé 'selectorother' :
$formDescriptor = [
'selectorother' => [
'type' => 'selectorother',
'label' => 'selectorother',
// options disponibles dans ce menu (affiché => valeur)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// taille maximale du champ 'other'
'size' => 7,
// longueur maximale du champ 'other'
'maxlength'=> 10,
]
];
selectandother
Un menu déroulant vers le bas et un champ texte simple appelé 'selectandother' :
$formDescriptor = [
'selectandother' => [
'type' => 'selectandother',
'label' => 'selectandother',
// options disponibles dans ce menu (affiché => valeur)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// taille maximale du champ 'other'
'size' => 18,
// longueur maximale du champ 'other'
'maxlength'=> 10,
]
];
multiselect
Ensemble de plusieurs cases à cocher appelé 'multiselect' :
$formDescriptor = [
'multiselect' => [
'type' => 'multiselect',
'label' => 'multiselect',
// options disponibles dans ce menu (affiché => valeur)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// options sélectionnées par défault (identifiées par valeur)
'default' => [ 0, 'option2id' ],
]
];
radio
Champ de boutons radio appelé 'radio' :
$formDescriptor = [
'radio' => [
'type' => 'radio',
'label' => 'radio',
// options disponibles dans les cases à cocher (affiché => valeur)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// options sélectionnées par défault (identifiées par valeur)
'default' => 1,
]
];
check
Champ avec un case à cocher appelé 'mycheck' :
$formDescriptor = [
'mycheck' => [
'type' => 'check',
'label' => 'mycheck',
]
];
checkmatrix
Une matrice à deux dimensions de cases à cocher appelée 'checkmatrix' :
$formDescriptor = [
'checkmatrix' => [
'type' => 'checkmatrix',
'label' => 'checkmatrix',
// Les colonnes sont combinées avec les lignes pour créer les options disponibles dans la matrice
// affiché => valeur
'columns' => [
// affiché => valeur
'Column A' => 'A',
'Column B' => 'B',
'Column C' => 'C',
],
// Les lignes sont combinées avec les colonnnes pour créer les options disponibles dans la matrice
'rows' => [
// affiché => valeur
'Row 1' => 1,
'Row 2' => 2,
'Row 3' => 3,
],
'force-options-on' => [ 'C-2' ], // Options pour coché et activé (identifiées par valeurs)
'force-options-off' => [ 'C-3' ], // Options pour décoché et désactivé (identifiées par valeurs)
'tooltips' => [ 'Row 3' => 'These options are in row 3.' ], // infobulle à ajouter à l'étiquette de la 3e ligne
'default' => [ 'A-1', 'B-3' ], // options sélectionnées par défault (identifiées par valeur)
]
];
info
Simple chaîne textuelle (n'est pas réellement une entrée) appelée 'info':
$formDescriptor = [
'info' => [
'type' => 'info',
'label' => 'info',
// valeur à afficher
'default' => '<a href="https://wikipedia.org/">Wikipedia</a>',
// si true, la chaîne ci-dessus ne sera pas du HTML échappé
'raw' => true,
]
];
submit
Un bouton submit appelé 'submit'. Par défaut, il en existe déjà un à la fin du formulaire; celui-ci est un bouton supplémentaire :
$formDescriptor = [
'submit' => [
'type' => 'submit',
'buttonlabel' => 'submit',
]
];
hidden
Une entrée de texte caché appelée 'hidden' :
$formDescriptor = [
'hidden' => [
'type' => 'hidden',
'name' => 'hidden',
// valeur à envoyer
'default' => 'This Intel Is Hidden',
]
];
Vous pouvez aussi utiliser $form->addHiddenField( 'name', 'value' )
pour accomplir le même travail.
tagfilter
Filtre sur les balises. Voir la liste des balises sur Special:Tags.
$formDescriptor = [
'tagFilter' => [
'type' => 'tagfilter',
'name' => 'tagfilter',
'label-message' => 'tag-filter',
]
];
sizefilter
Filtre sur la taille. Voir les exemples sur Special:NewPages.
$formDescriptor = [
'size' => [
'type' => 'sizefilter',
'name' => 'size',
'default' => '',
]
];
user
Boîte de texte qui prend en entrée des noms d'utilisateurs existants localement.
$formDescriptor = [
'username' => [
'type' => 'user',
'label' => 'Username:',
'exists' => true,
]
];
usersmultiselect
Permet de sélectionner plusieurs utilisateurs. Voir l'exemple ⧼email-blacklist-label⧽ dans les préférences utilisateur.
$formDescriptor = [
'size' => [
'type' => 'usersmultiselect',
'name' => 'size',
'label' => 'Publishers:',
'exists' => true,
]
];
url
Boîte de texte qui prend en entrée une URL web (http:// ou https://).
$formDescriptor = [
'urlinput' => [
'type' => 'url',
'name' => 'web-url',
'label' => 'Url:',
]
];
title
Boîte de texte avec auto-complétion, qui prend en entrée le titre d'une page wiki.
$formDescriptor = [
'titleinput' => [
'type' => 'title',
'name' => 'page-title',
'label' => 'Title:',
]
];
date
Sélecteur automatique de date qui prend une date en entrée.
$formDescriptor = [
'dateSelector' => [
'type' => 'date',
'name' => 'date-input',
'label' => 'Date:',
]
];
time
Sélecteur automatique de référence horaire qui prend l'heure en entrée.
$formDescriptor = [
'timeSelector' => [
'type' => 'time',
'name' => 'time-input',
'label' => 'Time:',
]
];
datetime
Sélecteur automatique de date et de référence horaire qui prend la date et l'heure en entrée.
$formDescriptor = [
'datetimeSelector' => [
'type' => 'datetime',
'name' => 'datetime-input',
'label' => 'Date and Time:',
'min' => $min, // intialise $min avec la valeur minimale
'max' => $max, // intialise $max avec la valeur maximale
]
];
Boîte de texte qui prend une adresse courriel (abc@g.com) en entrée.
$formDescriptor = [
'myemail' => [
'type' => 'email',
'label' => 'Enter Your Email:',
'autofocus' => true,
'help' => 'This is the help message for myemail.',
]
];
limitselect
Taille limite d'une boîte déroulante de sélection de menu.
$lang = $this->getLanguage();
$formDescriptor = [
'limit' => [
'type' => 'limitselect',
'name' => 'limit',
'label' => 'Items per page',
'options' => [
$lang->formatNum( 20 ) => 20,
$lang->formatNum( 50 ) => 50,
$lang->formatNum( 70 ) => 70,
$lang->formatNum( 100 ) => 100,
],
]
];