Dein Vorname:<br>
<input type="text" id="vorname" size="20"><br>
Dein Nachname:<br>
input type="text" id="nachname" size="20"><br>
Dein Nachname, Vorname:<br>
<output name="name"></output>
</form>
Am Beispiel sieht man, dass bei der Eingabe von Text, dieser in der Folge "Nachname, Vorname" geschrieben wird.
Zusätzlich kann man durch weglassen des name-Attributs in den input-Elementen verhindern, dass bei Absenden der Daten alle Daten mitgeschickt werden. Also aus den Feldern "Vorname" und "Nachname" werden keine Daten mitgeschickt.
Genauso lassen sich mit dem output-Element Berechnungen erledigen.
Im folgenden Beispiel haben wir die Berechnung des BMI dargestellt ;-)
</form>
In der obigen Rechnung wurde eine einfache Berechnung des Body-Mass-Indexes vorgenommen.
Kurzer Exkurs in die Formel:
Gewicht in kg : (Grösse in m)2
Die Rechnung in unserem Beispiel ist etwas anders: Hier wird die Grösse in cm (Zentimeter) eingegeben. Dies hat den einfachen Vorteil, dass man bei Dezimalzahlen nicht überlegen muss, ob man die englische Schreibweise (".") oder die deutsche Schreibweise (",") nutzen soll. Damit lassen sich viele Unklarheiten seitens des Anwenders vermeiden.
Im form-Befehl findet man wieder das oninput-Attribut. Übersetzt heisst die Zeile in etwa so:
Der Wert im Feld "bmi" (bmi.value) ist gleich (=) der Wert des Feldes "gewicht" (gewicht.value) geteilt durch (/) dem Produkt aus den Werten der Felder "groesse" und "groesse" geteilt durch 10000 ((groesse.value * groesse.value) / 10000).
Die Ausgabe des Wertes erfolgt bei direkter Eingabe, d.h. bei jeder Eingabe einer Zahl wird der Wert neu berechnet.
Wie im ersten Beispiel dieser Seite wurden den Feldern "Gewicht" & "Grösse" keine name-Attribute vergeben. Somit wird lediglich der Wert im output-Element verschickt.