StarHTML Weiteres JavaScript und Formulare

JavaScript und Formulare


Formulare sind eine Möglichkeit der Interaktion zwischen Internetanbieter und Kunden. Der Benutzer gibt Daten in ein Formular auf einer Website ein und schickt sie an den Rechner des Anbieters zurück. Formulare werden bei Suchmaschinen zur Eingabe von Suchkriterien, bei Internet-Kaufhäusern für die Bestellung und bei vielen weiteren Diensten zur Übermittlung von Daten genutzt.
Damit sind Sie ein interessantes Gebiet, auch für private Homepages. Doch ohne höhere Programmierkenntnisse in CGI/Perl lassen sich Formulare nur schwer auswerten. Sie können sich den Inhalt des ausgefüllten Formulars auch als EMail zusenden lassen, dies stellt aber eine sehr primitive Nutzung dar.

Sehr sinnvoll lassen sich einzelne Formular-Elemente aber in Verbindung mit der Programmiersprache JavaScript nutzen. Sie können kleine JavaScript-Programme ohne Probleme in ihren Seiten verwenden, brauchen weder Programmierkenntnisse noch die neuesten Browser, denn JavaScript wird bereits von Netscape 2.0 und Internet Explorer 3.0 verstanden.

Formulare


Es gibt verschiedene Formularelemente:


Ihr Name:

Warum würden Sie einen HTML-Nobelpreis verleihen?

Ihre Pizza-Bestellung:

Geben Sie bitte die gewünschten Zutaten an:
Salami
Pilze
Ananas

Geben Sie Ihre Zahlungsweise an:
Mastercard
Visa
American Express

Zunächst ist ein einzeiliges Eingabefeld mit einer Länge von 30 Zeichen. Dann kommt ein unbegrenztes mehrzeiliges Eingabefeld, mit einer festen Breite von 50 Zeichen und einer Länge von 3 Zeilen. Anschließend können Sie einen Eintrag aus einer mehrzeiligen Auswahlliste auswählen, und sogar noch die Zutaten selbst bestimmen. Natürlich müssen Sie die Zahlungsweise angeben, Mehrfachauswahlen sind hier nicht möglich. Zuletzt ist noch eine Schaltfläche, mit der Sie zur letzten Seite zurückkommen.
Eine besondere Form der Auswahlliste erreichen Sie, wenn Sie die Zeilenanzahl auf 1 setzen, das sieht dann so aus:

Formular-Elemente


Um einige kleine JavaScript-Programme zu nutzen brauchen Sie nicht all diese Befehle, die folgenden sind jedoch wichtig:

BeispielBeschreibung
<form> ... </form> Damit wird jedes Formular eingeleitet bzw. beendet.
<input name="*"
size=* maxlength=*>		 Einzeiliges Eingabefeld (input = Eingabe)
Hinter name= geben Sie dem Feld einen Namen, hinter size= legen Sie die Breite in Zeichen und hinter maxlength= die maximale Länge des einzugebenden Textes fest.
<select name="*" size=*>
<option>Eintrag 1
<option>Eintrag 2
<option>Eintrag 3
</select>		 Auswahlliste (select = wählen)
Eingeleitet durch <select>, in dem hinter name= wieder der Name und hinter size= die Zeilenzahl festzulegen ist.
Dann folgen ein <option> je Eintrag.
<input type=button
value="*">		 Schaltflächen (value = Wert)
Sie sind nützlich, um ein bestimmtes JavaScript-Programm zu starten, siehe unten. Hinter Value geben Sie die Beschriftung der Schaltfläche ein.

Doch es gibt eine Möglichkeit Formulare ohne JavaScript zu nutzen, diese möchte ich Ihnen nicht vorenthalten:

<b>Was halten Sie davon, dass es noch keinen HTML-Nobelpreis gibt?</b><p>
<form action="mailto:*" method=post enctype="text/plain">
<input name="Antwort" size=80><p>
<input type=submit value="Absenden">
</form>

Es handelt sich um eine Umfrage. Tragen Sie in die erste Zeile Ihre Frage ein und hinter mailto: Ihre Email-Adresse. Im <input>-Tag hinter name=geben Sie dem Eingabefeld noch einen Namen (hier: Antwort). Wenn nun jemand diese Seite lädt, etwas in das Eingabefeld tippt und anschließend auf [Absenden] klickt, wird Ihnen der Eintrag im Eingabefeld per Email zugeschickt. Dazu muss der Besucher aber eine POP3-Mailbox im Browser eingerichtet haben.

JavaScript


JavaScript ist kein Bestandteil von HTML, es ist eine eigenständige Programmiersprache, abgeleitet von Java. Entgegen der verbreiteten Meinung, man können mit JavaScript-Programmen auf Internetseiten beim Benutzer Schaden anrichten, unterdrückt JavaScript selbst alle Möglichkeiten des Manipulierens eines Systems übers Internet.
Alle Browser, die JavaScript unterstützen, ermöglichen das Abschalten der Unterstützung, es können also nicht alle Nutzer ihre Programme nutzen.
Obwohl JavaScript im Vergleich mit anderen Programmiersprachen sehr einfach ist, bietet es doch viele Funktionen, die für Anfänger sehr verwirrend sind. Aber Sie müssen nicht JavaScript beherrschen, um kleine Programme zur Optimierung einer Homepage nutzen zu können. Bei StarHTML finden Sie eine Reihe solcher Beispiele, die Sie ganz einfach übernehmen können.

Der JavaScript-Programmcode wird im head-Teil der Seite eingefügt. Er wird mit
<script language="JavaScript"> eingeleitet und mit </script> beendet.

Testen Sie eingefügte Programme unbedingt, bevor Sie die Internetseiten veröffentlichen!

JavaScript-Beispiele mit Formularen


<html><head>
 <title>Seitentitel</title>
 <script language="JavaScript">
 <!--
 function Go()
 {
  i = document.forms[0].Auswahl.options.selectedIndex;
  x = document.forms[0].Auswahl.options[i].value;
  if(x == "nothing")
   {
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
   return;
   }
  else if(x == "end") top.location.href = parent.frames[1].location;
  else
   {
   parent.frames[1].location.href = x;
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
  }
 }
 //-->
 </script>
</head><body>
 <form name="Form">
 <select size=1 name="Auswahl" width=350>
  <option value="nothing">[ Titel ]
  <option value="end">Beenden
  <option value="nothing">------------------------
  <option value="datei1.htm">Erste Datei
  <option value="datei2.htm">Zweite Datei
  <option value="datei3.htm">Dritte Datei
 </select>
 <input type=button value="Laden" onClick="Go()">
 </form>
</body></html>

Dieses Beispiel zeigt den Quelltext des Navigations-Frame in einem zweiteiligen Frameset. Es wird eine einzeilige Auswahlliste definiert, außerdem ein Klick-Button. Wenn auf diesen Klick-Button geklickt wird, wird das JavaScript-Programm aus dem head-Teil aufgerufen, dass die Anzeige der in der Liste gewählten Seite im anderen Frame bewirkt. Dieses JavaScript-Programm finden Sie beispielsweise in der Frameversion von StarHTML.

Um es an ihre Seite anzupassen, müssen Sie folgendes wissen:

  • width=350 legt die Breite des Eingabefeldes auf 350 Pixel fest, diesen Wert können Sie nach belieben ändern.

  • Hinter value= geben Sie in Anführungszeichen die Adresse der Datei an, die geladen werden soll. (Dabei gilt das Selbe wie beim normalen Verweis)

  • Wenn Sie value="nothing" angeben, wird der Klick ignoriert, diese Auswahl dient also lediglich zur Übersichtlichkeit in der Auswahlliste. Wenn Sie dagegen end angeben, wird bei dieser Auswahl das Frameset beendet und die aktuelle Seite des unteren Frame im Vollbild angezeigt.

Sie können beliebig viele solcher Einträge in der Auswahlliste einfügen und die hier vorgegebenen Einträge auch beliebig abändern oder löschen.

Achtung: Im Programm ist an 2 Stellen das zu ändernde Frame mit parent.frames[1] bestimmt. Dies ist das zweite Frame, in der Reihenfolge, wie sie definiert wurden. Wenn Sie aber das erste Frame ändern möchten, müssen Sie hier eine 0 in die eckigen Klammern schreiben!

StarHTML Weiteres
Browser-Kompatibilität   Nützliche JavaScripts

Martin Zwirner ©5/2000 EMail Online-Forum