JavaScript & Form - Benutzereingaben im Formular

Formulare dienen der Eingabe von Informationen durch den Benutzer. Dabei existieren eine Reihe von Eingabelementen, die jede für sich einen bestimmten Zweck erfüllen. Die Paralellen zu Eingabeelementen von traditionellen Anwendungen sind nicht zu übersehen. Ein Formular wird mit dem Form-Tag eingeleitet und umschließt alle darin enthaltenen Eingabeelemente.

Es gibt Felder zur Eingabe von Text – wobei es egal ist, ob in diesen Elementen die Eingabe von Zahlenwerten oder Texten erfolgt: Für das Eingabeelement spielt das keine Rolle. Mehrzeilige Auswahllisten und aufklappbare Combo-Boxen mit auswählbaren Werten, werden gleichermaßen durch Auswahllisten (in HTML mit dem Select-Tag definiert) repräsentiert. Dabei wird hier einfach das Size-Attribut des Select-Tags auf 1 gesetzt, was dazu führt, dass aus der List-Box eine Combo-Box wird.

Weiterhin sind Radio-Buttons, mit deren Hilfe ein Anwender genau eine aus mehreren zur Verfügung stehenden Alternativen auswählen kann, und auch Checkboxen in HTML mit entsprechenden HTML-Tags vertreten. Im Gegensatz zu Radio-Buttons bieten Checkboxen dem Benutzer die Möglichkeit mehrere Optionen aus einer Reihe von Wahlmöglichkeiten gleichtzeitig auszuwählen.

Auch Buttons, die zur Bestätigung der Eingabe oder zum Zurücksetzen der Eingabefelder dienen, haben ihren Platz in JavaScript-Formularen. Darüber hinaus können auch Buttons definiert werden, die andere Aktionen einleiten. Eine besondere Rolle in einem Formular spielen Felder zum Upload (Hochladen) von Dateien. Diese bestehen aus einem Eingabefeld und einem Button, der nach dessen Betätigung einen Dateiauswahldialog öffnet.

Die Prüfung der vom Benutzer eingegebenen Daten kann mit Hilfe von JavaScript erfolgen, wobei es zu Problemen führen kann, wenn die Eingabe ausschliesslich auf Client-Seite geprüft wird. Benutzereingaben sollten also stets auch auf Seite des Webservers geprüft werden. Eine Eingabeprüfung wird oft unter Einsatz von JavaScript Events eingeleitet. Wird beispielswiese das onClick-Event eines Eingabeelements – normalerweise wird hier ein Button verwendet – ausgelöst, so wird die Eingabe durch eine entsprechende JavaScript-Funktion geprüft. Aber auch das onSubmit-Event eines Formulars kann mit einem entsprechenden Event-Handler belegt werden. In diesen Fällen werden normalerweise alle im Formular vorhandenen Eingabefelder auf einmal geprüft.

Eine weitere Möglichkeit besteht darin, jedes einzelne Eingabeelement getrennt auf Gültigkeit der Eingabe zu prüfen. Die Eingabeprüfung wird dann automatisch eingeleitet, wenn das Eingabefeld den Fokus – durch Anklicken eines Elements ausserhalb des Eingabeelements oder durch Betätigung der TAB-Taste, wodurch der Fokus auf das nächste Element gesetzt wird – verliert. Hier kommt dann das JavaScript-Event onBlur zum Einsatz.

JavaScript Form Beispiel 1: Zugriff auf ein JavaScript Get Form

Der Zugriff auf die Elemente einer Form in JavaScript ist auf zwei unterschiedlichen Wegen umsetzbar. Die erste Möglichkeit betsteht darin, sich den Fähigkeiten des Forms-Objektes zu bedienen. Das Forms-Objekt ist ein direktes Kindobjekt des vordefinierten JavaScript-Objekts Document. Über dieses Document-Objekt, welches in der JavaScript-Objekthierarchie wiederum unter dem Window-Objekt angesiedelt ist, kann nun auf mehreren Wegen jedes einzelne im HTML-Dokument definierte Formular separat angesprochen werden.

Für das Ansteuern des Formulars stehen nun drei Varianten zur Verfügung, die sich nur wenig voneinander unterscheiden. Zwei dieser Methoden laufen über den Vektoroperator ([]). Hierbei wird der Zugriff auf ein Formular entweder über den Index – das erste Formular im HTML-Dokument hat die Indexposition 0 das zweite Formular 1... – oder, ähnlich wie bei einem assoziativen Array, über den Namen des Forulars realisiert. Die dritte Methode für den Zugriff auf ein bestimmtes Formular wird über den Zugriff auf die Eigenschaften des Forms-Objekts realisiert. Das Forms-Objekt speichert nämlich die darin enthaltenen Formulare unter deren Namen in seinen Objekteigenschaften.

Die zweite Möglichkeit zum Zugriff auf HTML-Formulare erfolgt ebenfalls mittels Document-Objekt. Anders als mit dem Forms-Objekt kann ein Formular auch direkt über seinen Namen angesprochen werden. Dies setzt voraus, dass die Eigenschaft name des Formulars (im HTML Form-Tag) mit einem entsprechenden Formularnamen belegt ist, über den das Formular addressiert wird. Angesprochen wird ein bestimmtes Formular, indem der Formularname an das Document-Objekt angehängt wird. Im Beispiel unten wird diese Vorgehensweise mit dem vierten Aufruf demonstriert.

Ausgehend vom Form-Objekt, welches wie oben beschrieben angesteuert wird, kann nun auf Eigenschaften und Methoden des ausgewählten Formulars zugegriffen werden. Im Beispiel unten wird die Form-Eigenschaft Method, welche im gleichnamigen Form-Attribut bei der Definition des Formulars angegeben wurde, ausgelesen und im HTML-Dokument unter Verwendung der Methode write() ausgegeben. Die im Formular enthaltenen Eingabeelemente – genauer gesagt der Name und Typ des jeweiligen Eingabeelements – werden im letzten Code-Abschnitt des Beispiels ausgegeben. Dabei wird in der For-Schleife über die unterschiedlichen Zugriffsweisen auf das Formular zugegriffen. Jedes Formular besitzt das Unterobjekt Elements, welches den Zugriff auf die im Formular enthaltenen Eingabeelemente ermöglicht.

<form name="formular1" method="get">
  Eingabefeld <input id="tname" name="Textfeld" type="text" /><br>
  <input type="reset" name="Reset-Button" value="Zur&uuml;cksetzen" />
  <input type="submit" name="Submit-Button" value="Daten abschicken" /><br><br>
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Möglichkeiten zum Ansprechen eines HTML-Formulars über das
  // Forms-Objekt.
  // 1. Direkt mittels Formularname...
  document.write ('1. ' + document.forms.formular1.method + '<br>');
  // 2. über den Vektoroperator mit dem Formularnamen...
  document.write ('2. ' + document.forms['formular1'].method + '<br>');
  // 3. und über den Index unter dem das Formular im
  //    Forms-Objekt gespeichert ist..
  document.write ('3. ' + document.forms[0].method + '<br>');
  // Das Formular ist auch unter seinem Namen, der im FORM-Tag
  // in der Eigenschaft name gespeichert ist, ansprechbar.
  // Daraus folgt die vierte Zugriffsmöglichkeit mit folgendem
  // Konstrukt.
  document.write ('4. ' + document.formular1.method + '<br><br>');

  // Inhalt des oben definierten Formulars ausgeben.
  // Die Eigenschaftswerte name und type speichern den Namen und
  // den Typ des jeweiligen Eingabeelements.
  for (i = 0; i < document.formular1.elements.length; i++)
    document.write ('Eingabeelement ' + i +
        ' - Name: ' + document.forms['formular1'].elements[i].name +
        ', Typ: ' + document.forms[0].elements[i].type + '<br>');
  // -->
  </script>
</form>

Das gezeigte Beispiel funktioniert natürlich auch mit einem Post-Form. Im Prinzip ist es für den Zugriff auf Elemente eines Formulars mit JavaScript unerheblich, ob es sich um ein GET-Form oder POST-Form handelt. Die Übertragungsmethode, die im Form-Attribut method angegeben wird, legt nur die Methode fest, mit der die Formulardaten an den Server verschickt werden.

weiter zu Seite 2 3 4 5 6 7 8 9 »