HTML-Formulare mit Javascript schreiben

HTML-Formulare mit Javascript schreiben

Es wird vorausgesetzt, dass sie die Eigenschaften und Werte der Formular-Elemente mit → Javascript-Funktionen lesen können.
Alle verwendeten Javascript-Funktionen sind im Quelltext dieser Webseite enthalten.



Initialisierung


Hier werden dazu 2 verschiedene Varianten vorgestellt



HTML-Quelltext eines Formulars:
<form method="get" action="ziel.php">
<input type="text" name="txt1" value="Anfang"/>
<input type="range" name="rng1" value="50"/>
<input type="checkbox" name="cb1" checked="checked"/>
<input type="radio" name="rb1" checked="checked"/>
</form>


Dieses Verhalten kann erwünscht sein.
In diesem Fall sollte man jedoch überlegen, was bei Eingabe unerlaubter Werte geschehen soll:
Ein falsch ausgefülltes Formular enthält bei erneutem Laden wieder den unzulässigen Wert.


HTML-Quelltext:
<body onload="do_onload()">

Javascript-Quelltext:
function do_onload() {
document.f1.txt1.value = 'Anfang';
document.f1.rng1.value = '50';
document.f1.cb1.checked = true;
document.f1.rb1[0].checked = true;
}


Die gezeigte Funktion do_onload() schreibt definierte Anfangs-Werte in die Eingabe-Felder des im Absatz oberhalb gezeigten Formulars.

Jedes Element wird in der hierarchischen Syntax der Elemente angegeben: Man beginnt mit document, danach folgt der Name des Formulars, danach jener des Elements, zuletzt der Name der zu schreibenden Eigenschaft (hier: value oder checked).

Ausgabe-<output>-Element


Seit → HTML Version 5 gibt es für Formulare auch Ausgabe-Elemente:
<output>Wert</output>
Diese Elemente werden genauso wie Eingabe-Elemente programmiert, lassen sich jedoch nur lesen (read-only) und von den AnwenderInnen nicht ändern.



Tragen sie eine Text-Spende in das grün unterlegte Eingabe-Feld ein.
Das mit Javascript berechnete Ergebnis (Anzahl der Zeichen) wird in das gelb unterlegte Ausgabe-Feld eingetragen:
Dieses Feld kann man manuell nicht ändern.


Javascript-Quelltext
function do_f21() {
var v = document.f21.txt21.value;
document.f21.out21.value = v.length;
}


Wenn die sichere Ausgabe von Daten mit allen Browsern funktionieren soll, dann verwendet man vorläufig besser ↓ DOM-Methoden.

DOM-Methoden zur Ausgabe


Das funktioniert mit allen gängigen Browser-Programmen und ist garantiert nur lesbar.


Javascript-Quelltext
function do_f21() {
var v = document.f21.txt21.value;
var n = document.getElementById('result');
n.firstChild.nodeValue = v.length;
}


Hier wird angenommen, dass die Javascript-Funktion den aktuellen Wert aus dem im vorigen ↑ Kapitel vorgestellten Muster-Formular f21 liest.

Die → DOM-Methode getElementById() adressiert ein Element mit seinem id-Attribut. Hier wird das Element an die Objekt-Variable n zugewiesen.

Mit firstChild wird das erste Child-Element bezeichnet: Das ist in diesem Beispiel ein Text mit dem Zeichen '0' (Null).

Mit der Eigenschaft nodeValue wird der aktuelle Wert bezeichnet: Die Funktion kann diesen Wert lesen oder (hier) überschreiben.


function do_f21() {
var tv = document.f21.ti21.value;
var n = document.getElementById('result');
while(n.childNodes.length>0) {
n.removeChild(n.firstChild);
}
var ntxt=document.createTextNode(tv.length);
n.appendChild(ntxt);
}


Die Verwendung von innerHTML öffnet eine Sicherheits-Lücke: Damit wird ein XSS-Angriff leicht gemacht.

Anhang

Quadrat, Rechteck, Kreis, Addition, Städte-Quiz, Schul-Noten, Rechenkönig-1, Rechenkönig-2, IT-Toto