Websiteentwicklung: JavaScript: Dynamisierung von Formularen

Wie man Formularen mit JavaScript Intelligenz einhaucht

XHTML-Formulare sind zunächst eine mehr oder weniger statische Sache. Der Benutzer kann Text eintippen, Checkboxen anklicken, Listenpunkte aus einer Liste auswählen und schließlich den Formularinhalt an ein Dienstprogramm schicken. Im Sinne von Barrierefreiheit und Zugänglichkeit ist dies alles an Information, was durch ein Formular vermittelt werden kann. Der Inhalt wird dann vom Dienstprogramm ausgewertet, welches dann gewöhnlich das Ergebnis der Auswertung zurücksendet. Typisch wird dieses Programm die Eingabe dann auf Vollständigkeit und Sinngehalt prüfen und gegebenenfalls in der Ergebnisseite fehlende oder mangelhafte Angaben erneut abfragen. Diese Prüfung sollte man sich auch durch Einsatz von JavaScript nicht sparen, denn es kann letztlich sonst nicht sichergestellt werden, dass beim Dienstprogramm ankommende Daten wirklich immer komplett vollständig und sinnvoll sind, auch weil nicht komplett kontrollierbar ist, wie die Zusendung zustande gekommen ist.

JavaScript kann hier bei einer barrierefreie Anwendung allenfalls ergänzend eingesetzt werden, um im Falle einer Skriptinterpretation schon vor dem Absenden zu prüfen, ob das Formular komplett und sinnvoll ausgefüllt wurde. Dieses kann es dem Nutzer bei aktivierter Skriptinterpretation ersparen, zahlreiche Anfragen mit Fehlversuchen an das Dienstprogramm zu stellen, was ein höheres Datenaufkommen impliziert. Weil indessen nicht alle die Interpretation von JavaScript aktiviert und verfügbar haben und die Prüfung per JavaScript leicht umgangen werden kann, ist so eine Vorabprüfung nur eine optionale Hilfe, kein Ersatz für eine Prüfung mit dem Dienstprogramm. Mit JavaScript kann man also letztlich nichts erreichen, was das Dienstprogramm nicht auch unabhängig davon machen kann oder sollte, es kann gegebenenfalls nur der Datenverkehr reduziert werden.

Mit JavaScript ergibt sich also vor dem Absenden des Formulars bereits die Möglichkeit einer interaktiven Ausfüllhilfe. Wenn Sie ein Formular mit JavaScript dynamisieren, können Sie zum Beispiel

• das Programm prüfen lassen, ob der Benutzer Angaben vergessen oder unsinnige Angaben gemacht hat.
• Formularelemente farblich hervorheben, wenn der Benutzer dort nichts eingegeben hat.
• ein Rechenprogramm einbauen, das es Ihrem Kunden zum Beispiel ermöglicht, Körpermaße in eine Konfektionsgröße umzurechnen.

Das derzeit (2014) noch immer in Vorbereitung befindliche HTML5 bietet allerdings zahlreiche Möglichkeiten, bei denen das Darstellungsprogramm bereits selbst ohne Skripteinsatz den ausgefüllten Formularinhalt vor dem Absenden gemäß den Angaben des Autors prüfen kann oder bereits nur sinnvolle Eingaben erlaubt. Somit erübrigt sich durch diese Verbesserung von (X)HTML der Einsatz von Skripten für diese Zwecke praktisch komplett. Die auf dieser Seite beschriebene Methodik wird also ab dem Erscheinen von HTML5 als offizieller Empfehlung eher Übungscharakter haben und der Einsatzzweck auf öffentlichen Seiten hat sich damit praktisch erledigt. Da diese Prüfung allerdings ähnlich wie die durch Skripte leicht zu umgehen ist, bleibt natürlich auch weiterhin die Prüfung nach dem Absenden durch das Dienstprogramm notwendig.

Ein generelles Problem der Beurteilung von Nutzereingaben liegt darin, dass es für ein einfaches Programm oft nicht einfach ist, den Sinngehalt zu prüfen. Teilweise ist der Sinngehalt auch zeitabhängig, etwa sind heute andere email-Adressen zulässig als noch im letzten Jahrhundert, ein altes oder ungeschickt geschriebenes Skript könnte also leicht eine Angabe als unsinnig einstufen, die zum Zeitpunkt des Ausfüllens korrekt ist - das trifft allerdings auch auf ungeschickte Prüfungen mit dem Dienstprogramm zu. In beiden Fällen ist es also immer wichtig, dem Nutzer einen Ausweg zu lassen, statt ihn in einer nicht erfüllbaren Prüfschleife zu fangen. Diese trifft auch auf die neuen Möglichkeiten von HTML5 zu. Auch bei dieser Methode müssen Autoren darauf achten, dass die Prüfung nicht versehentlich auch einige sinnvolle Eingaben unterbindet und damit einige Nutzer ausschließt.

Dynamisierte Formulare können aber eventuell auch für andere Zwecke benutzt werden, nicht nur für die Datenprüfung vor der Übermittlung an das Dienstprogramm. Da ersteres allerdings die definierte Aufgabe eines (X)HTML-Formulars ist, ist immer darauf zu achten, dass die (X)HTML-Elemente gemäß ihrer Bedeutung und Funktion korrekt verwendet werden und dass die gewünschte Funktion auch ohne Skriptinterpretation verfügbar bleibt.

Auf der Grundlage von dynamisierten Formularen kann man sogar für private Zwecke per Skript und ohne Dienstprogramm Lernprogamme (zum Beispiel einen Vokabeltrainer) oder Computerspiele programmieren. Da Spiele oft auch graphische Strukturen aufweisen, kann es da meist allerdings sinnvoller sein, SVG statt (X)HTML mit Formularen zu verwenden. Formulare sind primär für Anwendungen geeignet, wo der Nutzer Texteingaben macht.

Damit ein Formular dynamisch beziehungsweise interaktiv werden kann, brauchen Sie logischen Zugriff auf seine Bestandteile und Charakteristika. Auf der XHTML-Seite sind die Bestandteile mit Elementen (form, input), die Charakteristika in Attributen (type, name, id, size und so weiter) kodiert. Auf der JavaScript-Seite entsprechen den Elementen und Attributen sogenannte Eigenschaften (englisch: 'properties'). In diesem Kapitel können Sie lernen, wie XHTML-Elemente und -Attribute in JavaScript-Eigenschaften „übersetzt“ werden, sodass JavaScript auf Formulare zugreifen kann.

Wie man Formulare und Formularelemente adressiert

Um mit JavaScript logischen Zugriff auf Formulare oder Formularelemente zu nehmen, muss man diese korrekt adressieren. Dafür gibt es bei JavaScript nicht nur eine, sondern mehrere zulässige Schreibweisen.

Zur Erinnerung: JavaScript ist eine objektorientierte Programmiersprache. Formulare sind in JavaScript eine Eigenschaft (Property) des document-Objekts. Wenn man ein individuelles Formular adressieren will, hat man die Wahl zwischen folgenden Schreibweisen:

• document.forms[n]
  „n“ bezeichnet die laufende Nummer des Formulars im Dokument, wobei die Nummerierung, wie immer bei JavaScript, nicht mit 1, sondern mit 0 beginnt. Wenn ein Dokument nur 1 Formular enthält, so heißt dieses forms[0]; wenn zwei vorhanden sind, werden sie als forms[0] und forms[1] adressiert, und so weiter. Diese Schreibweise ist besonders nützlich, wenn man innerhalb eines Dokuments mehrere Formulare hat, die alle gleich sind und die man, zum Beispiel mit einer for-Schleife, nacheinander auf gleiche Weise bearbeiten will. Weitere Vorzüge bestehen darin, dass man weder versehentlich zweimal denselben Namen vergeben kann noch sich den Namen oder den Fragmentidentifizierer (Wert des Attributes id) eines Formulars zu merken braucht.
• document.getElementsByName(name) oder einfach: document.name
  „name“ ist der Name, der dem Formular per XHTML-Attribut 'name zugewiesen wurde.
• document.getElementsById(id) oder einfach: document.id
  „id“ ist der Identifikator, der dem Formular per Fragmentidentifizierer XHTML-Attribut 'id zugewiesen wurde.

Anmerkung: Wenn das Skript sich nur auf ein einziges Dokument bezieht, kann man „document.“ weglassen.

Formularelemente (zum Beispiel Textfelder, Schalter) werden als Eigenschaften (englisch: 'properties') des übergeordneten Formulars adressiert. Letzteres muss immer mitbezeichnet werden. Ansonsten ist die Vorgehensweise dieselbe wie beim Adressieren eines Formulars. Wenn man sich für die erstgenannte Schreibweise entscheidet, schreibt man zum Beispiel forms[0].elements[5].

Anmerkung: Die verschiedenen Schreibweisen dürfen beliebig gemischt werden. Beispiel: meinFormular.elements[0].

Eigenschaften von Formularelementen

Die meisten Attribute von XHTML-Formularelementen lassen sich mehr oder weniger direkt in JavaScript-Eigenschaften „übersetzen“:

value und value.length

Die JavaScript-Eigenschaft value liefert und steuert das value-Attribut eines Formularelements:

• bei einem Textfeld: den Wert (Zeichenkette, Zahl), der im Textfeld angezeigt wird oder den der Benutzer eingetippt hat
• bei einem Schalter: den Wert (Zeichenkette, Zahl), der auf dem Schalter angezeigt wird
• bei einer Checkbox oder einem Radioschalter: den Namen des „Etiketts“ des anklickbaren Elements

Die value-Eigenschaft ermöglicht es erstens, den Wert eines Attribut value in JavaScript-Code zu verwandeln. Wenn man zum Beispiel ein Programm schreiben will, das die Quadratwurzel einer vom Benutzer eingetippten Zahl berechnet, muss man diese Benutzereingabe, um damit rechnen zu können, zunächst in eine JavaScript-Variable einlesen. Das geschieht so: meineVariable=meinFormular.meinTextfeld.value (die Bezeichnungen meineVariable, meinFormular und mein Textfeld sind natürlich durch korrekte Adressen zu ersetzen; wie das geht, steht weiter oben auf dieser Seite).

Die value-Eigenschaft ermöglicht es zweitens auch, ein Attribut value zu verändern, also zum Beispiel in einem Textfeld programmdefinierten Text anzuzeigen oder einen Schalter neu zu „etikettieren“. Das geschieht zum Beispiel so: meinFormular.meinSchalter.value="du hast mich zu oft gedrückt".

Die JavaScript-Eigenschaft value.length liefert die Zahl der Zeichen einer value-Zeichenkette. Wenn man prüfen will, ob der Benutzer in ein Formularfeld eine Eingabe gemacht hat (oder ob er das Feld vielleicht übersehen hat), kann man Quelltext wie zum Beispiel if (meinFormular.meinTextfeld.value.length==0) … verwenden.

className

Die JavaScript-Eigenschaft className liefert und steuert das class-Attribut eines Formularelements. (Zur Erinnerung: Als Wert class-Attribut kann eine Liste mit frei wählbaren Klassenamen notiert werden. Diese können etwa verwendet werden, um Elemente gleicher Klasse per CSS zu dekorieren, siehe CSS-Klasse). Man kann damit also zum Beispiel im Programmverlauf das Aussehen von Formularelementen verändern. Beispiel: meinFormular.meinSchalter.className="SchalterFalscheEingabe". Man kann natürlich auch den Skriptablauf davon abhängig machen, zu welcher Klasse ein Eingabeelement gehört.

style

Die JavaScript-Eigenschaft style liefert und steuert das style-Attribut eines Formularelements. Beispiel: meinFormular.meinTextfeld.style.backgroundColor="red". Aus verschiedenen Gründen sollte allerdings das Attribut style generell vermieden werden, die vorherige Möglichkeit per Klassenzuordnung ist also eigentlich immer die angemessenere.

readOnly und disabled

Die JavaScript-Eigenschaft readOnly liefert und steuert das readonly-Attribut eines Formularelements. Sie liefert entweder true oder false. Wenn man sie zum Steuern der Beschreibbarkeit zum Beispiel eines Textfeldes verwenden will, muss man dies nach folgendem Muster tun: meinFormular.meinTextfeld.readOnly = true;.

Das Attribut disabled wird analog gehandhabt.

name und id

Die JavaScript-Eigenschaft name liefert und steuert das name-Attribut eines Formularelements. Diese Eigenschaft sollte eigentlich nicht geändert werden müssen und ist hier nur der Vollständigkeit wegen aufgeführt.

Auf das id-Attribut kann man analog mit der JavaScript-Eigenschaft id zugreifen.

type

Die JavaScript-Eigenschaft type liefert und steuert das type-Attribut eines Formularelements. Mit dieser JavaScript-Eigenschaft kann man im Programmverlauf zum Beispiel ein Textfeld in einen Schalter verwandeln. Das wird in den meisten JavaScript-Büchern nicht dargestellt und sollte, weil es Tücken hat, auch nur von Fortgeschrittenen probiert werden.

Eigenschaften von Formularen

Auf ähnliche Weise kann auch auf die Attribute des Formulars selbst zugegriffen werden:

• meinFormular.length liefert die Zahl der Elemente (Textfelder, Schalter und so weiter) in einem Formular.
• meinFormular.name liefert und steuert das name-Attribut des Formulars.
• meinFormular.id liefert und steuert das id-Attribut des Formulars.

Für eine detaillierte Liste siehe hier.

Methoden für Formular-Elemente

Formular-Elemente können nicht nur durch JavaScript-Eigenschaften, sondern auch mit Hilfe von Methoden gesteuert werden. Hier eine Übersicht:

getAttribute(), setAttribute(), getAttributeNS(), setAttributeNS()

Die getAttribute()-Methode liefert den Wert eines beliebigen Attributs eines beliebigen Elements (zum Beispiel den value eines Textfeldes). Wie bei jeder anderen Methode auch hängt man die getAttribute()-Methode, durch einen Punkt getrennt, hinten an das Element an. In den Klammern gibt man als Parameter das fragliche Attribut an. Beispiel: meinTextfeld.getAttribute("value").

Mit der setAttribute()-Methode kann man die Werte von Attributen steuern. Die Schreibweise ist dieselbe wie bei der getAttribute()-Methode, als Parameter muss in diesem Fall aber nicht nur das Attribut, sondern auch der Wert angegeben werden, den das Attribut annehmen soll. Beispiele: meinTextfeld.setAttribute("value", "meinText"), meinTextfeld.setAttribute("readOnly", false).

Mögliche Parameter sind u.a.: value, class, style, size, name, id, readOnly, disabled.

Die Methoden mit dem zusätzlichen 'NS' im Namen können bei XML-Formaten wie XHTML und SVG verwendet werden, um Namensraumangaben zu machen, diese sind dann ein zusätzlicher erster Parameter.

focus() und blur()

Die focus()-Methode zwingt ein Formularelement (oder auch jedes beliebige andere XHTML-Element) in den Fokus. Wenn man die Methode zum Beispiel auf ein Textfeld anwendet, erscheint in dem Feld eine blinkende Positionsmarke. Beispiel: meinTextfeld.focus().

Die blur()-Methode entfernt ein Formularelement umgekehrt aus dem Fokus. Die blinkende Positionsmarke verschwindet.

Anmerkung: Die blur()-Methode kann nicht verwendet werden, um ein Formularfeld unbeschreibbar oder einen Schalter unklickbar zu machen. Um das zu erreichen, muss man die readOnly- oder disabled-Eigenschaft verändern.

click()

Die click()-Methode führt einen Mausklick auf ein Element aus.

Ereignisbehandlung

Ein weiteres Gebiet, mit dem Sie sich, wenn Sie mit dynamischen Formularen arbeiten wollen, vertraut machen müssen, ist die Ereignisbehandlung (englisch: event-handling). Eine Ereignisbehandlung brauchen Sie zum Beispiel, wenn JavaScript auf einen Schalterklick des Benutzers hin eine bestimmte Operation, zum Beispiel eine Berechnung durchführen soll. Die Ereignisbehandlung spielt bei JavaScript eine so große Rolle, dass ihr in diesem Buch ein eigenes Kapitel gewidmet ist.

Über die globalen Event-Handler wie onclick, onload usw. hinaus stehen bei JavaScript einige Event-Handler zur Verfügung, die rein auf Formulare und Formularelemente zugeschnitten sind:

• onblur ‒ startet ein Skript, wenn das Element den Fokus verliert
• onchange ‒ startet ein Skript, wenn das Element verändert wird
• onfocus ‒ startet ein Skript, wenn das Element in den Fokus gelangt
• onreset ‒ startet ein Skript, wenn das Formular mit reset auf den Ausgangszustand zurückgesetzt wird
• onselect ‒ startet ein Skript, wenn das Element ausgewählt wird
• onsubmit ‒ startet ein Skript, wenn das Formular mit submit abgeschickt wird

Im Sinne von Barrierefreiheit und Zugänglichkeit und der Trennung des Inhaltes von der Dekoration und von dynamischen Skriptanwendungen gemäß Schichtenmodell sollte auf diese (X)HTML-Attribute allerdings komplett verzichtet werden. Stattdessen kann die Ereignisbehandlung komplett im Skript über das Dokument-Objekt-Modell erfolgen.