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:
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:
Pizza Napoli
Pizza Mexicana
Pizza Quatro Stagioni
Formular-Elemente
Um einige kleine JavaScript-Programme zu nutzen brauchen Sie nicht all diese Befehle, die folgenden sind jedoch wichtig:
Beispiel Beschreibung
<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!