Javascript: Wie funktionieren Formulare?

Formulare und PHP

Formulare bestehen meist aus mindestens zwei Komponenten: dem HTML-Formular mit form- und input-Tags für die HTML-Seite und einem PHP-Programm (hier z.B. formmailer.php) auf dem Server. Das muss nicht so sein, ist aber immer noch die klassische Technik für die Kommunikation zwischen Client und Backend.

<form action="formmailer.php" method="post">
   <label>Name 
      <input type="text" name="username" value="" placeholder="Name">
   </label>
   <label>Ort
      <select name="ort">
         <option value="Münster">Münster</option>
         <option value="Böblingen">Böblingen</option>
         <option value="Rüdesheim" selected="selected">Rüdesheim</option>
         <option value="München">München</option>
      </select>
   </label> 
   <label>Bemerkung
      <textarea name="bemerkung"></textarea>
   </label>
   <label><input type="submit" value="Absenden" /><label>
</form>

Form submit

Der Benutzer füllt Felder des Formulars aus und klickt auf „Absenden“ (submit), damit der Browser die Daten zur Weiterbearbeitung an das Programm auf dem Server (formmailer.php) überträgt.

Beim Absenden des Formulars stellt der Browser aus den Eingaben einen HTTP-Request zusammen. Das ist letztendlich nicht anderes als eine Zeichenkette (Query String), die bestimmten Regeln folgt: Alle Eingaben des Benutzers werden mit ein paar Sonderzeichen aneinander geheftet. Umlaute und Leerzeichen werden durch eine kleine Zeichenkette kodiert (z.B. das Leerzeichen durch %20, ein ü durch %C3%BC).

Name Ort

Bemerkung

Wenn die Felder des Formulars ausgefüllt sind und das Formular abgeschickt wird, entsteht ein Query String (Übergabestring):

So würde zum Beispiel der String aussehen, der beim Absenden des Formulars zum PHP-Programm auf dem Server geschickt wird:

Peter | Rüdesheim | Meine Bemerkung

form.php?name=Peter&ort=R%C3%BCdesheim&bemerkung=Meine%20Bemerkung

Darum müssen wir uns im Grunde genommen nicht kümmern: Das Zusammensetzen und Übertragen der Daten übernimmt der Browser, das PHP-Programm bekommt die Daten automatisch mundgerecht aufbereitet:

In der PHP-Anwendung ist $_POST ein Array, das die Informationen aus dem HTML-Formular enthält. Dieses Array enthält Schlüssel (für das name-Attribut des Formulars) und Werte (für die Benutzereingaben).

Nur wenn die Daten vor dem Absenden geprüft werden – z.B. sind alle erforderlichen Felder ausgefüllt? – kommt eine dritte Komponente ins Spiel: Javascript für Formulare.

Natürlich muss das PHP-Script dennoch ebenfalls prüfen, ob alle erforderlichen Werte eingegeben wurden und ob die Werte innerhalb des erlaubten Bereichs sind.

Zugriff auf Formularfelder mit Javascript

Javascript greift auf den Inhalt von Formularfeldern genauso zu wie auf andere Elemente:

Wenn das Formularfeld ein id-Attribut hat, mit getElementById (),
zusätzlich kann Javascript in Formularen das name-Attribut benutzen – getElementsByName ().

Wenn der Benutzer das Formular absendet, feuert der Browser ein onsubmit-Event. Javascript muss dieses Ereignis abfangen und verhindern, dass die Daten an die Anwendung übertragen werden.

document.getElementById('myForm').onsubmit = function () {
    let muser = document.getElementById('muser');
    let errorMsg = document.getElementById('errorMsg');
    
    console.log('Formular wird ausgefüllt');
    if ( muser.value == '') {
        errorMsg.innerHTML = 'Feld ist erforderlich';
        muser.focus();
        return false;
    }
}

Das Abfangen des Ereignisses onsubmit alleine reicht nicht. Erst return false oder heute lieber preventDefault verhindert bei einer falschen oder fehlenden Eingabe, dass die Daten an die Anwendung auf dem Server übermittelt werden. muser.focus() setzt den Cursor in das Eingabefeld.

Wenn kein Fehler gefunden wird, werden die Daten automatisch an den Server ausgeliefert.

Die Prüfung in diesem Beispiel ist einfach gehalten. I.d.R. wird mit regulären Ausdrücken geprüft, ob die Eingabe eine minimale Länge hat und ob es sich um korrekte Zeichen handelt.

<form action="form1.php" method="get" id="myForm">
    <label for="muser">Name 
        <span style="color:var(--me-highlight)" id="errorMsg"></span><br>
        <input type="text" id="muser" name="muser" value="" placeholder="Name">
    </label>
    <input type="submit" value="Absenden" />
</form>

Formulardaten per POST oder GET

Bei Daten in kleinen Mengen wird der HTTP-Request i.d.R. als GET-Request übertragen, während ein POST-Request für für das Heraufladen von Dateien und großen Mengen von Text eingesetzt wird. Ein GET-Request kodiert die Nachricht in einem »Query-String«, der an die URL der angefragten Resource angehangen wird. Ein POST-Request sendet die Nachricht im Body des Requests.

Für Javascript ist das GET oder POST unerheblich, solange kein XMLHTTPRequest eingesetzt wird.

Formulardaten erkennen

Die Anwendung auf dem Server muss erkennen, aus welchen Feldern das Formular besteht und welche Daten der Anwender in welches Feld eingetragen hat. Die Informationen bilden Name/Wert-Paare, die durch ihre Kodierung voneinander getrennt werden:

`form.php`	die aufgerufene URL
`?`	trennt die URL von den Daten
`=`	trennt den Namen vom Wert
`&`	trennt die Namen=Wert-Paare

Der Browser übermittelt nur die Daten aus Eingabefeldern mit name- und value-Attributen, denn diese Attribute bilden die Name-/Wertpaare. Die einzige Ausnahme ist das textarea-Element, das kein value-Attribut benötigt, weil der Wert automatisch durch den eingegebenen Text erzeugt wird.

Die Daten kodiert werden codiert:

Leerzeichen in eingegebenen Daten (z.B. bei mehreren Wörtern) werden durch + oder %20 ersetzt.
Alle Zeichen mit den ASCII-Werten 128 bis 255 (hexadezimal 80 bis FF) werden als Hexwerte geschrieben, eingeleitet durch % und dahinter der Hexadezimalwert des Zeichens (z.B. wird ö im Zeichensatz ISO-8859-1 durch %F6 ersetzt).
Alle Zeichen, die in diesen Regeln als Steuerzeichen vorkommen (also &, +, = und %) werden ebenfalls hexadezimal kodiert.

Das PHP POST-Array

Serverseitige Anwendungen in PHP müssen sich nicht um die Kodierung der Daten kümmern. In einer PHP-Anwendung landen die Daten fertig vorbereitet als Werte eines Arrays.

PHP kann die Daten direkt abfragen. Wenn die Eingabe aus dem Formular mit method="post" versendet wurden, kann PHP jedes Feld mit $_POST[<Name>] ansprechen.

if (isset ($_POST ['ort']) && $_POST ['ort'] == "Rüdesheim") {
    …
}

Die Anwendung muss sich auch nicht darum kümmern, ob "ort" aus einem Input-Feld, einem Select oder einer Textarea kommt, oder ob das Eingabefeld vom Typ "text" oder "hidden" ist.