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
    ]
];

email

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,
        ],
    ]
];