HTML-Formulare dienen der Erfassung und Übertragung von Benutzerdaten unterschiedler Art. Je nach dem
Umfang der zu übertragenden Daten und den vorgesehenen Möglichkeiten zur Auswertung und Weiterverarbeitung, kann bei
HTML-Formularen zwischen den Methoden GET und POST gewählt werden, um die Daten mit dem Hypertext Transfer Protocol
(HTTP) zu übertragen.
Ob die Daten mit GET oder POST übermittelt werden sollen, ist erst einmal gleich. In beiden Fällen wird vom Browser des
Benutzers eine Anfrage (Request) an den Webserver gestellt, an dem die Aktion gerichtet ist. Dazu muss im einleitenden
Form-Tag dem Attribut action eine mit relativen oder absoluten Pfadangaben referenzierte Webadresse (URL) zugewiesen
werden. Der Webserver wird, insofern kein Fehler auftrat, als Antwort (Response) die zur (im Attribut action
referenzierte) Webadresse gehörende Ressource aufrufen und ausliefern oder abarbeiten, wobei es sich bei der Ressource um
eine HTML-Seite handeln kann, jedoch nicht zwingend handeln muss.
GET: Erfolgt die Übermittlung der Daten per GET, so werden diese als QueryString
der referenzierten Webadresse, getrennt durch ein Fragezeichen, hinzugefügt, wobei die Namen der Formular-Elemente als
Parameter und die Inhalte der Formular-Elemente als Werte im QueryString enthalten sind.
POST: Bei der Übermittlung per Post werden die Formulardaten ebenfalls als
Parameter-Werte-Paare übertragen, nur werden diese nicht als QueryString einer URL hinzugefügt, sondern werden mit im
HTTP-Body übermittelt, wobei die zu übermittelnde Datenmenge größer sein kann als bei GET.
Bevor die Parameter mit ihren Werten aus einem QueryString ausgelesen, ausgewertet und verarbeiten
werden können, müssen diese Daten erst einmal mit einem HTML-Formular versendet werden. Im Beispiel soll dafür ein Formular
mit unterschiedlichen Input-Elementen dienen, welche eine Mehrfachauswahl von Radio-Buttons und die Eingabe eines Kurztextes
ermöglichen. Als Methode für den Versand wurde GET gewählt.
HTML-Formular (formpage.html):
<!DOCTYPE html> <html> <head> <title>Parameter und Werte mit GET versenden</title> <meta charset="utf-8"> <style type="text/css">body {text-align:center}</style> </head> <body> <h1>Daten mit GET übergeben</h1> <p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p> <form action="getpage.html" method="get" accept-charset="utf-8"> <input type="text" name="rabe" value="" size="30" maxlength="30"><br> <input type="radio" name="kate" value="Filme"> Filme <input type="radio" name="rubi" value="Movie"> Movie <input type="radio" name="item" value="30"> 30 <input type="radio" name="para" value="50"> 50<br> <br> <input type="reset" value="Leeren"> <input type="submit" value="Senden"> </form> </body> </html>
Bei Bedarf kann bereits vor dem Versenden überprüft werden, ob alle oder zumindest die wichtigsten
Eingabefelder ausgefüllt wurden. Ebenso kann vor dem Versenden überprüft werden, ob bei den Radio-Buttons eine Auswahl
getroffen wurde.
Im nachfolgenden Beispiel wurde das Formular durch den Event-Handler onsubmit im einleitendenden Form-Tag ergänzt und zur
Prüfung der Benutzereingaben eine selbstdefinierte Funktion zwischen <head> und </head> innerhalb der HTML-Seite
untergebracht.
Bei der Prüfung wird zuerst mit der Funktion pruefeEingaben() ermittelt, ob eine Eingabe im Textfeld erfolgte. Zusätzlich wird
der eingegebene Text mit einer RegEx-Methode und einem regulären Ausdruck nach unerlaubten Zeichen durchsucht.
Etwas anders verhält es sich bei den Radio-Buttons, da diese bereits mit einem Wert vorbelegt sind. Bei Radio-Buttons und
Checkboxen erfolgt lediglich mit checked eine Überprüfung des zurückgelieferten booleschen Wertes.
Boolesche Werte bei Radio-Buttons und Checkboxen
true - wurde ausgewählt
false - wurde nicht ausgewählt.
Liefert die Funktion pruefeEingaben() als Rückgabewert false, leitet der Event-Handler onsubmit diesen
booleschen Wert an den Browser weiter, womit die Aktion des Versendens abgebrochen wird. Zusätzlich wird mit der
alert()-Methode noch ein entsprechender Hinweis zur Kenntnisnahme für die Benutzerinnen und Benutzer ausgegeben.
Beispiel für ein Formular mit einer Prüfung der Benutzereingaben:
<!DOCTYPE html> <html> <head> <title>Formular mit Überprüfung</title> <meta charset="utf-8"> <style type="text/css">body {text-align:center}</style> <script type="text/javascript"> function pruefeEingaben() { var rabe = document.getElementsByName("rabe")[0].value; var rabe = rabe.replace(/[^a-zäöüÄÖÜß0-9s_-]/gi, ""); function pruefeFo(checken) { var gecheckt = document.getElementsByName(checken)[0].checked; return gecheckt; } if (rabe == "") { alert("Es wurde kein Text eingegen!"); return false; } if (pruefeFo("kate") === false && pruefeFo("rubi") === false) { alert("Es wurde weder Filme noch Movie ausgewählt!"); return false; } if (pruefeFo("item") === false && pruefeFo("para") === false) { alert("Es wurde weder 30 noch 50 ausgewählt!"); return false; } } </script> </head> <body> <h1>Formular mit Überprüfung der Eingaben</h1> <p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p> <form action="getpage.html" method="get" onsubmit="return pruefeEingaben()" accept-charset="utf-8"> <input type="text" name="rabe" value="" size="30" maxlength="30"><br> <input type="radio" name="kate" value="Filme"> Filme <input type="radio" name="rubi" value="Movie"> Movie <input type="radio" name="item" value="30"> 30 <input type="radio" name="para" value="50"> 50<br> <br> <input type="reset" value="Leeren"> <input type="submit" value="Senden"> </form> </body> </html>
Für das Auslesen und die Verarbeitung von den in einem QueryString enthaltenen Parameter-Werte-Paaren
mit JavaScript gibt es unterschiedliche Ansatzpunkte. Allgemein wird dabei mit window.location.search der QueryString
eingelesen. Mit substring() kann die Anzahl der Zeichen begrenzt werden, wobei die Zählung bei 0 beginnt.
Nach dem Einlesen des QueryStrings sollte aus Sicherheitsgründen eine Filterung mit Hilfe eines regulären Ausdruckes erfolgen,
um nur undenkliche und für einen QueryString typische Zeichen durchzulassen. Im Code-Listing von "getpage.html" wird
der QueryString mit der Methode split() zuerst in Parameter-Werte-Paare aufgesplittet und im Anschluss deren Anzahl mit length
ermittelt. In einer For-Schleife erfolgt eine zweite Aufsplittung der Parameter-Werte-Paare in Namen und Werte.
Statt der Methode split() könnten die Werte jedoch ebenso mit Hilfe einer RegEx-Methode ausgelesen werden.
Ein Beispiel mit exec():
var eget = "rabe=wie+was+wo&kate=Filme&rubi=Movie&item=30¶=50"; var wget = /rubi=([a-z0-9+_-]+)(&*)/i; var rubi = wget.exec(eget); alert(rubi[1]); // Ausgabe: Movie
Nach dem Auslesen der Werte werden diese in der Funktion getEmpfang() noch den bereits deklarierten
Variablen zugewiesen, wofür im Beispiel der ?: Bedingungsoperator eingesetzt wird. Der Bedingungsoperator ermöglicht es, die
eigentlich erforderlichen if-Statements etwas zu vereinfachen. Ab nun stehen die übermittelten Werte zur weiteren Verwendung im
Script zur Verfügung.
Mit den verschachtelten Funktionen getPruefung() und pruefe() wird nur noch einmal kontrolliert, welche der Variablen mit einem
Wert initialisiert wurde und bei fehlender Initialisierung wird den Variablen ein Ersatzwert zugewiesen, bevor nach dem
vollständigen Ladens des Fensters eine Ausgabe mit window.onload erfolgt.
Beispiel für Ausgabe (getpage.html):
<!DOCTYPE html> <html> <head> <title>Parameter und Werte aus QueryString übernehmen</title> <meta charset="utf-8"> <style type="text/css"> body{text-align:center} .liste{text-align:left} .dvl{width:300px; margin:auto} .gtsp {color:#8E9583} </style> <script type="text/javascript"> var rabe, kate, rubi, item, para; /* --- Empfang und Zuordnung der Parameterwerte zu den Variablen -- */ function getEmpfang() { if (window.location.search != "") { var eingng = decodeURIComponent(window.location.search.substring(0,120)); var muster = /[^a-zäöüÄÖÜß0-9+_&=-]/gi; var einget = eingng.replace(muster, ""); var getspl = einget.split("&"); var gzaehl = getspl.length; for (var i = 0; i < gzaehl; i++) { var getnw = getspl[i].split("="); getnw[0] == "rabe" ? rabe = getnw[1] : false; getnw[0] == "kate" ? kate = getnw[1] : false; getnw[0] == "rubi" ? rubi = getnw[1] : false; getnw[0] == "item" ? item = getnw[1] : false; getnw[0] == "para" ? para = getnw[1] : false; } } } /* -------------------------------------------------------------------- Prüfen, welche Parameter übergeben wurden und welche Variablen mit einem Wert belegt sind. ----------------------------------------------------------------------- */ function getPruefung() { getEmpfang(); // Aufruf von getEmpfang rabe = pruefeGet(rabe); kate = pruefeGet(kate); rubi = pruefeGet(rubi); item = pruefeGet(item); para = pruefeGet(para) function pruefeGet(gt) { if (typeof(gt) !== "undefined" && gt != "") { gt = gt.replace(/[+]/g, " "); } else { gt = "<span class=\"gtsp\">No Wert<\/span>"; } return gt; } } /* --- Aufbereitung zur Ausgabe bei onload ------------------------- */ window.onload = function() { getPruefung(); // Aufruf von getPruefung var lis = "<\/li><li>"; var rep = "<li>" + rabe + lis + kate + lis + rubi + lis + item + lis + para + "<\/li>"; document.getElementById("ausgabe").innerHTML = rep; } </script> </head> <body> <h1>Parameter und Werte aus QueryString übernehmen</h1> <p><a href="formpage.html">Formular</a> | <a href="getpage.html">Eingangsseite</a></p> <p>Es wurden folgende Datenwerte übergeben:</p> <div class="dvl"><ul id="ausgabe" class="liste"></ul></div> </body> </html>
Weitere Einzelheiten und Beispiele zum Thema Formulare und JavaScript auf der nachfolgenden Seite.
weiterlesen » Storage / Daten von Post-Formular
Einstieg in JavaScript
Listings & Tutorials
Übersicht