Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex auf Twitter verwenden

HTML5 Element ''output''
<output>

Logo des Browsers Chrome von GoogleLogo des Browsers Firefox von MozillaLogo des Browsers Internet Explorer von MicrosoftLogo des Browsers OperaLogo des Browsers Safari von Apple
Stand:

Das output-Element eignet sich ideal für die Ausgabe von Berechnungen.
Ebenso lassen sich auch andere Zeichenfolgen zusammensetzen:

Beispiel:

Dein Vorname:

Dein Nachname:

Dein Nachname, Vorname:

Quelltext-Auszug:

<form oninput="name.value = nachname.value + ', ' + vorname.value">

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 ;-)

Gewicht (kg):

Grösse (cm):

BMI:

Quelltext-Auszug:

<form oninput="bmi.value = gewicht.value / ((groesse.value * groesse.value) / 10000)">

Gewicht (kg):<br>
<input type="number" id="gewicht"><br>

Grösse (cm):<br>
<input type="number" id="groesse"><br>

BMI:<br>
<output name="bmi"></output>

</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.


zum Seitenanfang



© 2002 - 2022 · www.onlex.de - HomepageTools | Impressum | Sitemap