Intelligente Formulare - HTML5 - page 74

function updateProgress() {
var req = document.querySelectorAll(":required");
count = 0;
for(var i=0; i<req.length; i++) {
if (req[i].value != '') {
count++;
}
}
var pb = document.getElementById("formProgress");
pb.max = req.length;
pb.value = count;
}

Da sich der Fortschrittsbalken nur auf diese Elemente beziehen soll, die un-
bedingt eingegeben werden müssen, verwenden wir die Funktion querySelec-
torAll() und übergeben ihr die Zeichenkette :required . Als Ergebnis erhalten
wir eine NodeList , die nur Elemente beinhaltet, die das required -Attribut ge-
setzt haben. Anschließend läuft eine Schleife über diese Elemente und über-
prüft, ob das value -Attribut nicht mit einer leeren Zeichenkette übereinstimmt.
Trifft diese Bedingung zu (das bedeutet, es wurde schon ein Wert eingegeben),
so wird die Zählervariable count um einen Wert erhöht. Abschließend wird der
Maximalwert für das progress -Element auf die Anzahl aller required -Felder
gesetzt und der Wert ( value ) auf die Zahl der nicht leeren Elemente.

Zum Abschicken des Formulars stehen zwei Schaltflächen zur Verfügung: eine
mit der Beschriftung A BSCHICKEN .

Die Zwischenspeichern-Funktion wurde bereits in Abschnitt 3.4.5, Oder doch
nicht prüfen? »formnovalidate«, erklärt, neu ist hier das Attribut accesskey .
<p><input accesskey=Z type=submit formnovalidate
value="Zwischenspeichern [Z]" name=save id=save>
<input accesskey=A type=submit name=submit id=submit
value="Abschicken [A]">

Z WISCHENSPEICHERN und eine mit dem Schriftzug

Zwar sind Tastaturkürzel nicht neu in HTML5, viel Verwendung fanden sie bis-
her aber nicht. Ein Problem mit Tastaturkürzeln ist, dass sie auf unterschied-
lichen Plattformen mit unterschiedlichen Tastaturkombinationen aktiviert
werden und man nie so genau weiß, welche Taste man jetzt zu dem Kürzel
drücken muss. Die HTML5-Spezifikation hat auch hierzu einen Vorschlag pa-
rat: Der Wert des accessKeyLabel soll eine Zeichenkette zurückgeben, die dem
korrekten Wert auf der verwendeten Plattform entspricht. Diesen Wert könnte
man dann in der Beschriftung der Schaltfläche oder in deren title -Attribut