HTML5 führt ein neues Formularelement namens output ein, in dem der Anwender nichts eingeben kann. Stattdessen ist das Element dazu gedacht, um Werte aufzunehmen, die mit Hilfe von JavaScript ermittelt werden. Das würde allerdings ebensogut mit versteckten Formularfeldern gehen. Im Unterschied dazu hat das hier beschriebene Element jedoch einen sichtbaren Elementinhalt. Außerdem wird die Syntax für einfache Kalkulationen stark vereinfacht.
<form method="post" action="/cgi-bin/anmeldung.cgi"> <p>Vorname Zuname: <input type="text" id="vorname" size="30"> <input type="text" id="zuname" size="30"></p> <p><output for="vorname zuname" name="name" onforminput="value = zuname.value + ', ' + vorname.value"></output></p> <input type="submit" value="OK"> </form>
Das Beispiel enthält zwei gewöhnliche einzeilige Eingabefelder (<input type="text">), in denen der Anwender Vor- und Zuname eingeben kann. Wenn das Formular abgesendet wird, sollen jedoch nicht die Werte aus diesen Feldern einzeln übertragen werden, sondern eine zusammengesetzte Zeichenkette mit dem Format Zuname, Vorname.
Um das zu erreichen, ist unterhalb der beiden input-Felder ein output-Feld notiert. Es handelt sich um ein Element mit möglichem Inhalt und wird deshalb in der Form <output></output> notiert.
Im Attribut for werden, durch Leerzeichen getrennt, explizit die id-Namen derjenigen anderen Formularelemente angegeben, die an der Kalkulation beteiligt sind. Im obigen Beispiel bezieht sich die Angabe for="vorname zuname" also auf <input id="vorname"> und <input id="zuname">.
Wie die eigentliche Kalkulation zustande kommt, dafür gibt es keine Vorschrift. Eigens eingeführt wurde zu diesem Zweck jedoch der neue JavaScript Event-Handler onforminput, der im obigen Beispiel auch verwendet wird. Diesem Event-Handler wird ein einfaches JavaScript-Statement zugewiesen:
value = zuname.value + ', ' + vorname.value
Dieses Statement besagt: das value-Attribut des aktuellen Elements, also des output-Elements, soll als Wert eine Zeichenkettenzusammensetzung enthalten, bestehend aus dem Wert des Feldes zuname, einem Komma und einem Leerzeichen, und dem Wert des Feldes vorname. Dadurch entsteht das Format Zuname, Vorname.
Im obigen Beispiel sollte der Browser beim Absenden des Formulars nur das output-Element übertragen, da die Eingabefelder für Vor- und Zuname kein name-Attribut enthalten.
Für ältere Broswer sei hier noch eine herkömmliche Lösung vorgestellt, vorausgesetzt, JavaScript ist aktiviert.
<script> function zuvorname() { document.getElementById('indexname').value = document.getElementById('zuname').value + ', ' + document.getElementById('vorname').value; } </script> <form method="post" action="/cgi-bin/anmeldung.cgi" onsubmit="zuvorname(); return true;"> <input type="hidden" name="name" id="indexname" value=""> <p>Vorname Zuname: <input type="text" id="vorname"> <input type="text" id="zuname"></p> <input type="submit" value="OK"> </form>
Bei dieser Lösung wird die Zusammensetzung der Zeichenkette in einer eigenen JavaScript-Funktion vorgenommen. Diese wird aufgerufen, wenn das Formular abgesendet wird (Event-Handler onsubmit im einleitenden <form>-Tag). Der zusammengesetzte Wert (Zuname, Vorname) wird in einem versteckten Formularfeld gespeichert.
Die HTML5-Spezifikation machte zum Redaktionszeitpunkt keine Aussage darüber, wie ein Browser ein output-Feld darstellen soll, d.h. ob es zum Beispiel wie ein Nur-Lesen-Eingabefeld erscheinen soll, oder etwa als reiner Text.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.