HTML, CSS und JavaScript

HTML-Formulare

 aufwärts

Steuer­elemente

Auf HTML-Seiten lassen sich Steuer­elemente wie Text­eingabe­felder, Schaltfächen, Listenfelder usw. darstellen. Mithilfe dieser Steuer­elemente im Zusammenhang mit der Programmier­sprache JavaScript lassen sich HTML-Seiten interaktiv gestalten.

Ein sehr einfaches Beispiel ist die Reaktion auf die Betätigung einer Schaltfläche.

Der zugehörige Code in der HTML-Seite ist

<form>
<input type="button" value="Hier klicken" onclick="alert('Hallo!');">
</form>

Durch die <form>-Tags wird ein Formular gekennzeichnet. Das <input type="button">-Tag kennzeichnet eine Schaltfläche; mit dem Attribut value wird die Beschriftung der Schaltfläche angegeben. Das Attribut onclick bezeichnet die auszuführende Aktion beim Betätigen der Schaltfläche. Hier erzeugt die in JavaScript eingebaute Funktion alert ein Meldungs­fenster, in dem der Text Hallo! erscheint. Der Text Hallo! steht in einfachen Anführungs­zeichen, da die doppelten Anführungs­zeichen schon für den Wert des Attributs onclick benutzt werden.

Im nächsten Beispiel wird ein Text über ein Text­eingabe­feld eingegeben und im Meldungs­fenster wieder ausgegeben.

Gib deinen Vornamen ein:  

Der zugehörige Code in der HTML-Seite ist

<form>
Gib deinen Vornamen ein:
<input type="text" name="textbox1" size="10"> &nbsp; 
<input type="button" value="OK" onclick="alert('Hallo '+textbox1.value);">
</form>

Hier wird mit dem Tag <input type="text"> ein Text­eingabe­feld mit der Breite size="10" erzeugt. Das Text­eingabe­feld wird durch Angabe des Attributs name="textbox1" mit dem Namen textbox1 versehen. Der in das Text­eingabe­feld eingegebene Text ist dann durch textbox1.value abrufbar. Im Meldungs­fenster wird dieser Text dann, verkettet mit dem Wort Hallo, ausgegeben.

Ein etwas aus­führlicheres Beispiel für die Anwendung von Formular-Steuer­elementen im Zusammenhang mit JavaScript ist dieser Taschenrechner.

 

 

Weiter mit:   [JavaScript]   oder   up

 

homeH.W. Lang   FH Flensburg   lang@fh-flensburg.de   Impressum   ©  
Valid HTML 4.01 Transitional