Handbuch:HTML-Formular Tutorial 3

This page is a translated version of the page Manual:HTMLForm Tutorial 3 and the translation is 99% complete.

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

email

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