Handbuch:HTML-Formular Tutorial 3
Alle Arten von Feldern können mit HTML-Formular generiert werden. Hier werden feldspezifische Optionen beschrieben. Allgemeine Optionen (die jedem Feld zugewiesen werden können) werden im Tutorial 2 beschrieben.
Einführung
In $formDescriptor gibt es zwei Möglichkeiten, einen Feldtyp anzugeben: über die Attribute class oder type.
Verwendung des class Attributs
Zuerst kannst Du das class Attribut setzen (nicht mit cssclass mischen oder verwechseln)
'class' => 'HTMLTextField'
- HTMLTextField: Ein einfaches Textfeld
- HTMLFloatField: Ein einfaches Textfeld mit fließender (Number) -Validierung
- HTMLIntField: Ein einfaches Textfeld mit ganzzahliger Validierung
- HTMLUserTextField: Ein einfaches Textfeld für Benutzernamen
- HTMLTextAreaField: Ein erweitertes Textfeld
- HTMLSelectField: Ein Dropdown-Menü
- HTMLSelectOrOtherField: Ein Dropdown-Menü mit einer anderen Option, mit der ein einfaches Textfeld aktiviert wird
- HTMLSelectAndOtherField: Ein Dropdown-Menü und ein einfaches Textfeld
- HTMLMultiSelectField: Liste der Kontrollkästchen
- HTMLRadioField: Radiobuttons (Optionsschaltflächen)
- HTMLCheckField: Einzelne Checkbox
- HTMLCheckMatrix: 2D-Matrix der Kontrollkästchen
- HTMLInfoField: Nur Text, ohne Eingabe
- HTMLSubmitField: Zusätzliche Senden-Schaltfläche (HTMLForm fügt standardmäßig immer eine hinzu)
- HTMLHiddenField: Verstecktes Feld (Daten, die gesendet werden sollen, aber nicht angezeigt oder bearbeitet werden)
- HTMLTagFilter: Tags-Filter (Filter für Auszeichnungsmarkierungen)
- HTMLSizeFilterField: Filter für Dateigröße
- HTMLUsersMultiselectField: Auswahl Mehrere Nutzer
- HTMLTitleTextField: Textfeld für den Seitennamen
- HTMLDateTimeField: Datums- und Zeitbestimmung
Verwendung des type Attributs
Früher haben wir in diesem Tutorial class verwendet, ab nunwerden wir type verwenden. type bildet eine Verknüpfung zu class, class hat jedoch Priorität. Daher solltest Du nicht beide verwenden!
'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 (angeblich für die clientseitige HTML5-Validierung, HIER KEINE SERVERSEITIGE VALIDIERUNG!)
- toggle: HTMLCheckFieldÄhnlich wie check, aber mit
'invert' => true
kann die Standardeinstellung auf aktiviert gesetzt werden - edittools: HTMLEditToolsFügt eine Systemnachricht ein, einen gegliederten Inhalt aus MediaWiki: Edittools.
Ziel
Der folgende Code erstellt dieses Formular:
text
Ein einfaches Textfeld namens 'text':
$formDescriptor = [
'text' => [
'type' => 'text',
'label' => 'text',
// Standardwert des Feldes
'default' => 'Valeur par défaut',
// Feldhöhe anzeigen
'size' => 10,
// Maximale Länge der Eingabe
'maxlength'=> 7,
]
];
password
Ein Textfeld, das wie ein Passwortfeld mit dem Namen 'password' angezeigt wird:
$formDescriptor = [
'password' => [
'type' => 'password',
'label' => 'password',
// Standardwert des Feldes
'default' => '',
// Feldhöhe anzeigen
'size' => 16,
// Maximale Länge der Eingabe
'maxlength'=> 16,
]
];
float
Ein Textfeld, das nur durch Gleitkommazahlen mit dem Namen "float" überprüft wird:
$formDescriptor = [
'float' => [
'type' => 'float',
'label' => 'float',
// Standardwert des Feldes (Empfehlung: float als Standard setzen)
'default' => 41.976,
// Feldhöhe anzeigen
'size' => 8,
// Maximale Länge der Eingabe
'maxlength'=> 6,
// Minimalwert für die Eingabe
'min' => 41,
// Maximalwert für die Eingabe
'max' => 43,
]
];
int
Ein Textfeld, das nur von Ganzzahlen mit dem Namen "int" überprüft wird:
$formDescriptor = [
'int' => [
'type' => 'int',
'label' => 'int',
// Standardwert des Feldes (Empfehlung: int als Standard setzen)
'default' => 1789,
// Feldhöhe anzeigen
'size' => 4,
// Maximale Länge der Eingabe
'maxlength'=> 4,
// Minimalwert für die Eingabe
'min' => 0,
// Maximalwert für die Eingabe
'max' => 2011,
]
];
textarea
Ein einfaches Textfeld namens 'textarea':
$formDescriptor = [
'textarea' => [
'type' => 'textarea',
'label' => 'textarea',
// Standardwert des Feldes
'default' => 'Valeur par défaut',
// Anzahl der Zeilen (Höhe des Feldes)
'rows' => 3, // Feldhöhe anzeigen
]
]
select
Ein Drop-down-Menü namens 'select':
$formDescriptor = [
'select' => [
'type' => 'select',
'label' => 'select',
// Die im Menü verfügbaren Optionen (angezeigt => Wert)
'options' => [
'Option 0' => 0, // hängt davon ab, wie Du es siehst, aber Testen und Werte sind hier irgendwie durcheinander
'Option 1' => 1, // "Option 1" ist der angezeigte Inhalt, "1" ist der Wert
'Option 2' => 'option2id', // HTML-Ergebnis = <option value="option2id">Option 2</option>
]
]
];
selectorother
Ein Dropdown-Menü mit einer anderen Option, mit der ein einfaches Textfeld namens "selectorother" aktiviert wird
$formDescriptor = [
'selectorother' => [
'type' => 'selectorother',
'label' => 'selectorother',
// Die im Menü verfügbaren Optionen (angezeigt => Wert)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// Maximale Größe des 'anderen' Feldes
'size' => 7,
// Maximale Länge des 'anderen' Feldes
'maxlength'=> 10,
]
];
selectandother
Ein Dropdown-Menü und ein einfaches Textfeld namens 'selectandother':
$formDescriptor = [
'selectandother' => [
'type' => 'selectandother',
'label' => 'selectandother',
// Die im Menü verfügbaren Optionen (angezeigt => Wert)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// Maximale Größe des 'anderen' Feldes
'size' => 18,
// Maximale Länge des 'anderen' Feldes
'maxlength'=> 10,
]
];
multiselect
Checkboxen namens 'multiselect':
$formDescriptor = [
'multiselect' => [
'type' => 'multiselect',
'label' => 'multiselect',
// Die in den Kontrollkästchen verfügbaren Optionen (angezeigt => Wert)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// Die standardmäßig ausgewählten Optionen (durch den Wert bestimmt)
'default' => [ 0, 'option2id' ],
]
];
radio
Radiobuttons namens 'radio':
$formDescriptor = [
'radio' => [
'type' => 'radio',
'label' => 'radio',
// Die in den Kontrollkästchen verfügbaren Optionen (angezeigt => Wert)
'options' => [
'Option 0' => 0,
'Option 1' => 1,
'Option 2' => 'option2id',
],
// Die standardmäßig ausgewählten Optionen (durch den Wert bestimmt)
'default' => 1,
]
];
check
Ein einfaches Kontrollkästchen namens 'mycheck':
$formDescriptor = [
'mycheck' => [
'type' => 'check',
'label' => 'mycheck',
]
];
checkmatrix
A 2D matrix of checkboxes called 'checkmatrix':
$formDescriptor = [
'checkmatrix' => [
'type' => 'checkmatrix',
'label' => 'checkmatrix',
// Die Zeilen werden mit den Spalten kombiniert, um die in der Matrix verfügbaren Optionen zu erstellen
// angezeigt => Wert
'columns' => [
// angezeigt => Wert
'Column A' => 'A',
'Column B' => 'B',
'Column C' => 'C',
],
// Die Zeilen werden mit den Spalten kombiniert, um die in der Matrix verfügbaren Optionen zu erstellen
'rows' => [
// angezeigt => Wert
'Row 1' => 1,
'Row 2' => 2,
'Row 3' => 3,
],
'force-options-on' => [ 'C-2' ], // Zu prüfende und zu aktivierende Optionen (durch Werte gekennzeichnet)
'force-options-off' => [ 'C-3' ], // Zu prüfende und zu aktivierende Optionen (durch Werte gekennzeichnet)
'tooltips' => [ 'Row 3' => 'These options are in row 3.' ], // QuickInfo zum Hinzufügen der Zeilenbezeichnung für Zeile 3
'default' => [ 'A-1', 'B-3' ], // Die standardmäßig ausgewählten Optionen (durch den Wert bestimmt)
]
];
info
Nur Rohtext (ohne irgend einer Eingabe) mit dem Namen 'info':
$formDescriptor = [
'info' => [
'type' => 'info',
'label' => 'info',
// Wert, der angezeigt werden soll
'default' => '<a href="https://wikipedia.org/">Wikipedia</a>',
// Wenn auf "true" eingestellt, wird die obige Zeichenfolge nicht mit HTML-Escapezeichen versehen
'raw' => true,
]
];
submit
Eine Submit-Schaltfläche namens 'submit'. Standardmäßig befindet sich bereits eine am Ende des Formulars. Dies ist eine zusätzliche Schaltfläche:
$formDescriptor = [
'submit' => [
'type' => 'submit',
'buttonlabel' => 'submit',
]
];
hidden
Ein einfaches Textfeld namens 'hidden':
$formDescriptor = [
'hidden' => [
'type' => 'hidden',
'name' => 'hidden',
// Wert, der gesendet werden soll
'default' => 'This Intel Is Hidden',
]
];
Du kannst auch $form->addHiddenField( 'name', 'value' )
verwenden, um dasselbe Ergebnis zu erreichen.
tagfilter
Filtern nach Tags. Siehe die Liste der Tags unter Special:Tags.
$formDescriptor = [
'tagFilter' => [
'type' => 'tagfilter',
'name' => 'tagfilter',
'label-message' => 'tag-filter',
]
];
sizefilter
Nach Größe filtern. Siehe das Beispiel in Special:NewPages.
$formDescriptor = [
'size' => [
'type' => 'sizefilter',
'name' => 'size',
'default' => '',
]
];
user
Textfeld, das als Eingabe einen lokal existierenden Benutzernamen verwendet.
$formDescriptor = [
'username' => [
'type' => 'user',
'label' => 'Username:',
'exists' => true,
]
];
usersmultiselect
Wähle mehrere Benutzer aus. Siehe das Beispiel ⧼email-blacklist-label⧽ in den Benutzereinstellungen.
$formDescriptor = [
'size' => [
'type' => 'usersmultiselect',
'name' => 'size',
'label' => 'Publishers:',
'exists' => true,
]
];
url
Textfeld, in das eine Web-URL (http:// oder https://) eingegeben wird.
$formDescriptor = [
'urlinput' => [
'type' => 'url',
'name' => 'web-url',
'label' => 'Url:',
]
];
title
Selbstergänzendes Textfeld, das den Titel einer Wiki-Seite als Eingabe verwendet.
$formDescriptor = [
'titleinput' => [
'type' => 'title',
'name' => 'page-title',
'label' => 'Title:',
]
];
date
Als Eingabe wird die automatische Datumsauswahl verwendet .
$formDescriptor = [
'dateSelector' => [
'type' => 'date',
'name' => 'date-input',
'label' => 'Date:',
]
];
time
Als Eingabe wird die automatische Zeitauswahl verwendet .
$formDescriptor = [
'timeSelector' => [
'type' => 'time',
'name' => 'time-input',
'label' => 'Time:',
]
];
datetime
Als Eingabe wird die automatische Datums- und Zeitauswahl verwendet .
$formDescriptor = [
'datetimeSelector' => [
'type' => 'datetime',
'name' => 'datetime-input',
'label' => 'Date and Time:',
'min' => $min, // Stelle $min als Minimalwert ein
'max' => $max, // Stelle $max als Maximalwert ein
]
];
Textfeld, das als Eingabe die Emailadresse (abc@g.com) verwendet .
$formDescriptor = [
'myemail' => [
'type' => 'email',
'label' => 'Enter Your Email:',
'autofocus' => true,
'help' => 'This is the help message for myemail.',
]
];
limitselect
Ein Dropdown-Menü zur Auswahl des Grenzwerts.
$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,
],
]
];