1. Allgemeines
  2. Formularelemente
  3. Zugriff auf Inhalte
  4. Fehlerkontrolle
  5. Beispiel


1. Allgemeines


Dem Abschnitt Formulare wird in diesem Tutorial besondere Aufmerksamkeit gewidmet, da diese eine sehr häufige Anwendung in JavaScript darstellen.
Formulare sind vielseitig einsetzbar. So können sie z.B. als Kontaktformular, Umfragen, etc. benutzt werden. Der Aufbau des Formulars selbst wird dabei jedoch als reiner HTML-Code verfasst und ist somit von den eigentlichen JavaScript-Funktionen getrennt.
Das Formular und die Formularelemente müssen einen eindeutigen Namen erhalten, damit die Funktionen auf diese und deren Eigenschaften zugreifen können.
Das Formulartag verfügt neben dem Namen auch über andere Parameter, die nachfolgend erklärt werden:

actionbeschreibt die Aktion, die beim Anklicken des Submit-Button ausgeführt werden soll
method dieser Parameter hat 2 mgl. Werte: get oder post
wird get verwendet, wird die action in der URL mit angezeigt
bei post ist dies nicht der Fall

Eine Unterscheidung der beiden Methoden ist vor allem bei Passwortübergaben sehr sinnvoll. So würde es sich sicher keiner wünschen, dass er ein Passwort eingibt und dieses dann groß in der URL Zeile des Browsers angezeigt wird. In diesem Fall sollte also doch möglichst die Methode POST verwendet werden.

Top

2. Formularelemente


<INPUT> - Felder

Die Einbindung eines Formularelements erfolgt meist durch das <INPUT> - Tag. Die Eigenschaft "type" dieses Tags bestimmt dabei die Art des Formularelements. Mögliche Werte, die "type" annehmen kann, sind:

WertBeschreibung

textEingabefeld
buttonSchaltfläche
passwortPasswortfeld
submitAbsendeschaltfläche
resetZurücksetzen-Schaltfläche
radioRadiobutton
checkboxCheckbox
hiddenverstecktes Eingabefeld


Eigenschaften:

Eingabefeld:

Das Eingabefeld hat mehrere Eigenschaften:

name eindeutiger Name des Textfeldes; nötig, um später auf die Eigenschaften dieses Textfeldes wieder zugreifen zu können
size angezeigte Länge des Feldes in Zeichen
maxlength max. Länge der Zeichen in dem Feld, wenn sie die angezeigte Länge überschreitet, wird in dem Eingabefeld automatisch gescrollt
value Vorbelegung des Feldes mit einem Wert, Typ String
readonly besitzt keinen Wert; wenn es im Tag aufgeführt ist, kann der Inhalt nur gelesen und nicht verändert werden


Schaltfläche:

Das optische Erscheinungsbild ist durch das Betriebssystem vorherbestimmt.

nameeindeutiger Name
valueBeschriftung der Schaltfläche


Passwortfeld:

nameeindeutiger Name
sizeangezeigte Länge in Zeichen
maxlengthmax. Länge der Zeichen in dem Feld


Submit / Reset:

Die Syntax entspricht der einer normalen Schaltfläche. Im Gegensatz zu normalen Buttons, ist bei diesen Elementen das Ereignis schon vorbestimmt. Der Klick auf den Submit-Button bewirkt das Aufrufen der Formularaktion. Dabei werden alle im Formular befindlichen Werte übergeben.
Bei Betätigung des Reset-Buttons werden alle schon getätigten Formulareingaben gelöscht.

Radiobutton:

Radiobuttons können zu Gruppen zusammengefaßt werden. Dies ermöglicht, dass aus einer Gruppe immer nur ein Button markiert sein darf. Alle Buttons, die derselben Gruppe angehören, müssen mit dem gleichen Namen versehen sein. Diese Gruppe besitzt verschiedene Eigenschaften, welche über den Index angesprochen werden.

      document.forms[i].gruppenname.length à Anzahl der Buttons in einer Gruppe

nameeindeutiger Name
checkedboolscher Wert; zeigt Markierung an (angekreuzt = true)
valueWert, der beim Auslesen des Formularelements übergeben wird; entspricht nicht der Beschriftung des Buttons und ist auf der Seite nicht sichtbar


!!!Dieses Element besitzt ebenfalls einen Parameter 'value'. Dieser unterscheidet sich jedoch in seiner Funktion grundlegend von den value-Werten anderer Elemente.

Checkbox:

name eindeutiger Name
checkedboolscher Wert; zeigt Markierung an (angekreuzt = true)
valueWert, der beim Auslesen des Formularelements übergeben wird; entspricht nicht der Beschriftung des Buttons und ist auf der Seite nicht sichtbar


!!!Dieses Element besitzt ebenfalls einen Parameter value. Dieser unterscheidet sich jedoch in seiner Funktion grundlegend von den value-Werten anderer Elemente.


hidden:

Versteckte Eingabefelder dienen dazu Parameterwerte zu übermitteln, die vom Benutzer nicht gesehen werden sollen. Mit ihnen ist es möglich, Zusatzinformationen oder erläuternden Text einzufügen, die bei Absenden mittels Submit-Button mit übertragen werden. Es können auch Daten ausgelesen werden, die nicht auf dem Bildschirm zu sehen sind. So ist es z.B. möglich, Information zu bestimmten Einstellungen des Computers des Absenders zu erhalten.

name eindeutiger Name
valueVorbelegung des Feldes mit einem Wert, Typ String


Textarea

nameeindeutiger Name
colsSpalten
rowsZeilen
wrapZeilenumbrüche werden gesetzt, wenn dieses Attribut einen Wert erhält; Werte sind browserabhängig (Netscape virtuell oder physisch, IE soft oder hard)
readonlybesitzt keinen Wert; wenn es im Tag aufgeführt ist, kann der Inhalt nur gelesen und nicht verändert werden


select - Objekt (Listen)

Hierbei handelt es sich um das komplexeste Formularelement überhaupt. Es handelt sich um ein Container-Objekt, welches ein Array von option-Objekten enthält. Des weiteren kann im HTML-Code festgelegt werden, ob es sich um eine Popup- oder Scroll-Liste handelt (einstellbar über das Attribut size des select-Objektes). Bei der Popup-Liste kann im Gegensatz zur scrollbaren Liste nur ein Eintrag ausgewählt werden. Das select-Objekt selbst sowie die einzelnen Optionen können Attribute erhalten.

selectedIndex - stellt das wichtigste Attribut des select-Objektes dar; gibt den Index des ausgewählten Eintrages zurück; Numerierung beginnt bei 0

document.forms[i].selectName.selectedIndex

Eigenschaften

size - bestimmt die Anzahl der sichtbaren Einträge der Liste
        size = 1 à Popup-Liste, ansonsten Scroll-Liste


Attribute option-Objekt

textText, der in Auswahlliste angezeigt wird
value Wert, der beim Auslesen des Formularelements übergeben wird; entspricht nicht der Beschriftung des Eintrags und ist auf der Seite nicht sichtbar


        document.forms[i].selectName.options[i].value

Top

3. Zugriff auf Inhalte


Der Zugriff auf Formularinhalte erfolgt über JavaScript-Funktionen. Dabei ist es notwendig die einzelnen Elemente anzusprechen und ihre Werte abzufragen. Die Werte sind jeweils in dem Attribut value gespeichert.

Die Abfrage läuft wie folgt ab:
document.Formularname.Elementname.value
document.forms[i].elements[i].value

Die übersichtlichere Variante ist die Erstgenannte. Top

4. Fehlerkontrolle


Bei der Auswertung der Formulardaten kann es unter Umständen zu Fehlern kommen. So können z.B. erforderliche Daten nicht eingetragen worden sein. Um dies zu verhindern müssen die Inhalte vor dem Absenden überprüft werden. Dafür sollen die Werte der einzelnen Elemente ausgelesen und auf Inhalt getestet werden. Sollte bei einem der Werte der Inhalt null (" ") auftreten, ist dieser Wert nicht gesetzt. Daraufhin kann ein Hinweis (z.B. als alert- Anweisung ) an den Benutzer erfolgen, daß dieses Feld noch auszufüllen ist.

Ein weiterer Fehler kann die Angabe von falschen E-mail - Adressen sein. Diese müssen also ebenfalls überprüft werden.
Eine Möglichkeit ist der Test auf das @-Zeichen:

if(document.Formular.Mail.value.indexOf('@') == -1) {
     alert("Keine E-Mail-Adresse!");
     document.Formular.Mail.focus();
     return false;
}

Das Abfangen von Fehlern erfolgt über einen try- /catch-Block.
Top

5. Beispiel


Kontaktformular:

<html>
<head>
<title>Formulareingaben überprüfen</title>

<script type="text/javascript">
<!--
function chkFormular()
{
    if(document.Formular.Anrede.value == "")

 {
    document.Formular.Frau.value == "-";
    return false;
 }
    if(document.Formular.User.value == "")
 {
    alert("Bitte Ihren Namen eingeben!");
    document.Formular.User.focus();
    return false;
 }
    if(document.Formular.Ort.value == "")
 {
    alert("Bitte Ihren Wohnort eingeben!");
    document.Formular.Ort.focus();
    return false;
 }
    if(document.Formular.Mail.value == "")
 {
    alert("Bitte Ihre E-Mail-Adresse eingeben!");
    document.Formular.Mail.focus();
    return false;
 }
    if(document.Formular.Mail.value.indexOf('@') == -1)
 {
    alert("Keine E-Mail-Adresse!");
    document.Formular.Mail.focus();
    return false;
 }
    if(document.Formular.Betreff.value == "")
 {
    alert("Bitte den Betreff eingeben!");
    return false;
 }

 }
//-->

</script>
</head>


<body bgcolor="#EEEEEE" text="#000000">

<h1>Formular</h1>

<form name="Formular" action="auswertung.html" method="get" onSubmit="return chkFormular()">
<pre>
Herr/Frau: <input type="checkbox" name="Anrede" value="Herr">Herr <input type="checkbox" name="Anrede" value="Frau">Frau
Name: <input type="text" size="40" name="User">
Wohnort: <input type="text" size="40" name="Ort">
E-Mail: <input type="text" size="40" name="Mail">
Betreff: <input type="radio" name="betreff" value="privat">privat <input type="radio" name="betreff" value="geschäftlich">geschäftlich
Geburtstag: <select name="gebtag" size="1">
<option value="01">01
<option value="02">02
<option value="03">03
<option value="04">04
<option value="05">05
</select>
Geburtsmonat: <select name="gebmonat" size="1">
<option value="Januar">Januar
<option value="Februar">Februar
<option value="März">März
<option value="April">April
<option value="Mai">Mai
</select>
Geburtsjahr: <select name="gebjahr" size="1">
<option value="1980">1980
<option value="1981">1981
<option value="1982">1982
<option value="1983">1983
<option value="1984">1984
</select>

Formular: <input type="submit" value="Absenden"><input type="reset" value="Abbrechen">

</pre>
</form>

</body>
</html>


ansehen

Auswertung des Formulars:

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Auswertung</title>

<script language = "javascript">
<!--
parameter = window.location.search;

einzeln = parameter.split("&");
Anrede = einzeln[0];
Name = einzeln[1];
Ort = einzeln[2];
Email = einzeln[3];
Betreff = einzeln[4];
Gebtag = einzeln[5];
gebmonat = einzeln[6];
gebjahr = einzeln[7];

was = Anrede.split("=");
wer = Name.split("=");
wo = Ort.split("=");
wie = Email.split("=");
warum = Betreff.split("=");
wann1 = Gebtag.split("=");
wann2 = gebmonat.split("=");
wann3 = gebjahr.split("=");

document.writeln("Anrede: " + was[1] + "<br>");
document.writeln("Name: " + wer[1] + "<br>");
document.writeln("Ort: " + wo[1] + "<br>");
document.writeln("Email: " + wie[1] + "<br>");
document.writeln("Betreff: " + warum[1] + "<br>");
document.writeln("Gebtag: " + wann1[1] + "." + wann2[1] + "." + wann3[1]);


-->
</script>
</head>

<body bgcolor="#ffffff">
<p></p>
</body>
</html>


Erklärung zur Auswertung:

Über window.location.search werden die Parameter, welche in der Adresszeile übergeben werden, zurückgelesen und in "parameter" gespeichert.
Diese liegen in der Form:

    ?Parametername1=Parameterwert1&Parametername2=Parameterwert2& ...

vor.

Um also an den Wert der einzelnen Parameter zu gelangen, ist es nötig, den String "parameter" aufzusplitten. Das erfolgt über die Methode split().
Beim ersten aufsplitten wird als Trennzeichen das &-Zeichen benutzt. Die einzelnen Substrings werden als Einträge in das Array "einzeln" gespeichert.
Die Einträge liegen also in der Form:

    Parametername1=Parameterwert1

vor.

Um an den endgültigen Wert zu gelangen, müssen die Einträge des Arrays noch einmal gesplittet werden. Als Trennzeichen wird das = - Zeichen verwendet.
Die Werte werden wiederum in verschiedene Arrays gespeichert, wobei jedes Array dann zwei Einträge enthält - den Parametername und den Parameterwert.
Bei dem zweiten Eintrag im Array handelt es sich nun um den gewünschten Wert.
Die Ausgabe erfolgt mit document.writeln().

Top