Handbuch:HTML-Formular Tutorial 3

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Manual:HTMLForm Tutorial 3 and the translation is 99% complete.
Other languages:
Deutsch • ‎English • ‎español • ‎français • ‎日本語

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'

Ziel

File:HTMLFormTutorial.allfields.png

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

HTMLForm Tagfilter.jpg Filtern nach Tags. Siehe die Liste der Tags unter Special:Tags.

$formDescriptor = [
    'tagFilter' => [
        'type' => 'tagfilter',
        'name' => 'tagfilter',
        'label-message' => 'tag-filter',
    ]
];

sizefilter

HTMLForm Sizefilter.jpg

Nach Größe filtern. Siehe das Beispiel in Special:NewPages.

$formDescriptor = [
    'size' => [
        'type' => 'sizefilter',
        'name' => 'size',
        'default' => '',
    ]
];

user

HTMLForm User.jpg

Textfeld, das als Eingabe einen lokal existierenden Benutzernamen verwendet.

$formDescriptor = [
    'username' => [
        'type' => 'user',
        'label' => 'Username:',
        'exists' => true,
    ]
];

usersmultiselect

HTMLForm Usersmultiselect.jpg

Wähle mehrere Benutzer aus. Siehe das Beispiel Diesen Benutzern das Versenden von E-Mails an mich verbieten: in den Benutzereinstellungen.

$formDescriptor = [
    'size' => [
        'type' => 'usersmultiselect',
        'name' => 'size',
        'label' => 'Publishers:',
        'exists' => true,
    ]
];

url

HTMLForm Url.jpg

Textfeld, in das eine Web-URL (http:// oder https://) eingegeben wird.

$formDescriptor = [
    'urlinput' => [
        'type' => 'url',
        'name' => 'web-url',
        'label' => 'Url:',
    ]
];

title

HTMLForm Title.jpg

Selbstergänzendes Textfeld, das den Titel einer Wiki-Seite als Eingabe verwendet.

$formDescriptor = [
    'titleinput' => [
        'type' => 'title',
        'name' => 'page-title',
        'label' => 'Title:',
    ]
];

date

HTMLForm Date.jpg

Als Eingabe wird die automatische Datumsauswahl verwendet .

$formDescriptor = [
    'dateSelector' => [
        'type' => 'date',
        'name' => 'date-input',
        'label' => 'Date:',
    ]
];

time

HTMLForm Time.jpg

Als Eingabe wird die automatische Zeitauswahl verwendet .

$formDescriptor = [
    'timeSelector' => [
        'type' => 'time',
        'name' => 'time-input',
        'label' => 'Time:',
    ]
];

datetime

HTMLForm Datetime.jpg

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

HTMLForm Email.png

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

HTMLForm Limitselect.jpg

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