Manual:HTMLForm Tutorial 2/de

Der Rest dieser Seite befasst sich mit der Verwendung von HTML-Formular durch generische -Einträge (Einstellungen, die für alle Feldtypen gelten). Wir arbeiten daher nur an HTMLTextField-Eingaben.

Überspringe den allgemeinen Teil und gehe direkt zur Feldspezifikation

Hier sind wir in  und arbeiten an der  -Funktion ...



Start


Hinzufügen eines einfachen Textfeldes
Ersetzen wir "Hallo Welt" durch ein Textfeld namens

Nun sieht das Formular wie folgt aus:



Callback hinzufügen
Leider zeigt der vorherige Code das Formular an, aber das Formular funktioniert nicht. Wir müssen eine Abfolge schreiben, um die Formulareingabe zu verarbeiten!

Das Formular verarbeitet nun die übermittelten Daten:





Übermittlungsmethode
Das Formular kann so eingestellt werden, dass entweder die POST- oder die GET-Übermittlungsmethode verwendet wird.


 * POST (Standardeinstellung): Der Inhalt der Formularfelder wird in der Seiten-URL nicht angezeigt. Diese Methode sollte für Formulare verwendet werden, die den Wiki-Inhalt ändern (z. B. Seiten bearbeiten oder Benutzer blockieren).
 * GET: Der Inhalt der Formularfelder wird in der Seiten-URL angezeigt. Die resultierende URL kann mit einem Lesezeichen versehen oder verknüpft werden, damit andere sie anzeigen können. Die Übermittlung sehr langer Formulare (mehrere Kilobyte Text) kann jedoch fehlschlagen. Diese Methode sollte für Formulare verwendet werden, die den Wiki-Inhalt nicht ändern (z. B. eine Liste von Seiten anzeigen).

Wenn Du vor hast, die Daten über eine GET-Anforderung zu übermitteln, musst Du Folgendes hinzufügen:

Beachte, dass für GET-Formulare, die ein - oder   -Feld verwenden, eine "Formular-ID" festgelegt sein muss, damit sie ordnungsgemäß funktioniert, genauso wie wenn Du mehrere Formulare auf einer Seite verwendest –  siehe unten: Verwendung mehrerer Formulare auf einer Seite.



Validierung hinzufügen
Felder können vor dem Absenden eines callbacks einzeln validiert werden.

Zuerst geben wir die Anweisung HTMLForm, indem wir diese Zeile hinzufügen:

in :

Dann schreiben wir die Validierungslogik:

Die Validierungslogik überprüft nun die übermittelten Daten vor der Verarbeitung:





Erforderliches Feld
Du kannst angeben, dass ein Feld erforderlich ist, indem Du es einfach

zum formDescriptor hinzufügst. Jeder validation-callback wird überschrieben. Wenn du ein erforderliches Feld validieren möchtest, füge Deiner Validierungs-callback.Funktion die folgende Logik hinzu:



Filter hinzufügen
Die Filterung erfolgt VOR der Validierung, um die Eingabe zu ändern.

formDescriptor-Deklaration:

Filterlogik:



Hinzufügen einer i18n Unterstützung
Mit dieser Funktion kannst Du das Label in die Sprache übersetzen, die in den Benutzereinstellungen definiert ist. Ersetze einfach 'label' durch 'label-message' im formDescriptor, um die Zeichenfolge automatisch über die i18n-Routine abzurufen:

Vergiss nicht, den richtigen Eintrag in die Lokalisierungsdateien aufzunehmen. Zum Beispiel hier in Englisch und Französisch:

Für den Sende-Button müssen wir es "manuell" eintragen:

Natürlich musst Du, wie immer, den Eintrag myform-submit in die Lokalisierungsdateien einfügen.



Abschnitte hinzufügen
Jetzt müssen wir einige Felder hinzufügen und sie organisieren. Dafür wechseln wir zu einem größeren formDescriptor.

Die angezeigte Abschnittszeichenfolge wird automatisch aus den Lokalisierungsdateien abgerufen. Hier müssen wir Folgendes in en.json : hinzufügen:

Nun sieht das Formular wie folgt aus:



Unterabschnitte
Abschnitte können leicht mit der mächtigen Stärke von / verschachtelt werden.

Die i18n ID sieht dann so aus:

Nun sieht das Formular wie folgt aus:





Hilfetext hinzufügen
Wie wäre es, Benutzern Anweisungen zur einfachen Verwendung Deines Formulars zu geben? oder  (ein i18n-Nachrichtenname) sind dafür da.

Nun sieht das Formular wie folgt aus:





Hinzufügen von html CLASS und ID
Dafür sind  und   da.



Änderung der Eingabe-Bezeichnung
Standardmäßig lautet der Eingabename. Im vorherigen Beispiel lautet der Eingabename daher. Dies kann mit  geändert werden:

Damit Du Dir das vorstellen kannst, wird die HTML-Ausgabe wie folgt generiert:



Eingabe deaktivieren
disabled steht dort und der Benutzer kann mittels (STRG-C) keine Eingaben kopieren. Die Eingabe kann nicht hochgeladen werden. (On some browsers it may not be possible to copy the value.) The item will not be sent to the server.

So einfach ist das!



Eingabe schreibgeschützt
readonly (schreibgeschützt) ist eingetragen und der Benutzer kann keine Einträge ändern. The item will be sent to the server.

Auch dies ist so einfach!



Verwendung mehrerer Formulare in einer einzelnen Seite
Wenn Du mehrere Formulare auf einer einzelnen, speziellen Seite verwendest (z. B. eines zum Anzeigen von Suchergebnissen und eines zum Ändern eines Ergebnisses), musst Du eine "Formular-ID" festlegen, damit HTMLForm erkennen kann, welches der Formulare gesendet wurde. Die Bezeichnung kann eine beliebige Zeichenfolge sein, muss jedoch für jedes Formular unterschiedlich sein.

Aus technischen Gründen ist dies auch erforderlich, wenn ein - oder  -Feld in einem GET-Formular verwendet wird. Andernfalls kann HTMLForm nicht erkennen, ob das Formular gesendet wurde und daher, ob die Standardwerte geladen werden sollen oder nicht.

NÄCHSTE SEITE DES TUTORIALS