Intelligente Formulare - HTML5 - page 60

3.3.5 Berechnungen mit »output«

»Das output -Element enthält das Ergebnis einer Berechnung«. So lautet die
sehr knappe Erklärung in der HTML5-Spezifikation, und genau das findet man
auch auf den meisten Internet-Seiten, die das neue Element beschreiben. Das
klingt sehr vernünftig, aber was für eine Art von Berechnung ist damit gemeint?
Wieso braucht es dazu ein eigenes Element?

In der Regel handelt es sich dabei um Berechnungen, die aus Eingabefeldern
auf einer Webseite zustande kommen. Ein Beispiel, das vielleicht allen geläu-
fig ist, wäre ein elektronischer Einkaufswagen, in dem die Stückzahl für die
Produkte in einem input -Feld eingestellt werden kann. Mithilfe des optionalen
for -Attributs lässt sich festlegen, welche Felder in die Berechnung mit einflie-
ßen. Dabei werden ein oder mehrere id -Attribute anderer Felder des Doku-
ments referenziert.

Um das output -Element auszuprobieren, wollen wir so einen kleinen Einkaufs-
wagen programmieren, in dem drei verschiedene Produkte vorhanden sind.
Die Stückzahl jedes dieser Produkte kann mithilfe eines Eingabefeldes verän-
dert werden. Gleichzeitig wird unter dem Einkaufswagen die Anzahl der Waren
und die Gesamtsumme angezeigt. Abbildung 3.11 zeigt einen Warenkorb mit
fünf Einträgen.

Abbildung 3.11: Zwei »output«-Elemente zeigen die Anzahl der Produkte und deren
Gesamtpreis an.