HTML5 – Neuer Tag
Posted in Allgemeines, HTML5 on 02/28/2010 12:24 by Hoegerl_Karl Der Tag <meter> von HTML5 dient zur Angabe von Messwerten. Dabei kann nicht nur der aktuelle Messwert angegeben werden, sondern über die Attribute auch weitere Angaben. Der Tag meter kann für alle Messgrössen verwendet werden. Ein weiterer Vorteil ist, dass die Messwerte in Attributen leichter mit Javascript verarbeitet werden können.
Es können sechs Attribute genutzt werden:
- high = Die eingetragene Zahl gibt den höchsten Messwert einer Messreihe an.
- low = Die angegebene Zahl zeigt den niedrigsten Wert der Messreihe.
- optimum = Bei angegebene Messwert ist der optimale Messwert.
- value = Zusätzlich kann der aktuelle Messwert mit diesem Attribut angegeben werden.
- max = Eine eingetragene Zahl bei diesem Attribut gibt den möglichen Maximalwert an. Standardeinstellung ist “1″.
- min = Der mögliche Minimalwert wird bei diesem Attribut angegeben. Standardeinstellung ist hier “0″.
Achtung: Auch hier werden Atribute optional angegeben.
Zudem können
- die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
- die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
verwendet werden.
Quellcode Beispiel:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Den Tag meter nutzen</title>
</head>
<body>
<h1>Natriumdisulfit </h1>
<p>E223 - Einsatz als Konservierungsmittel.</p>
<p>Schmelzpunkt bei 150 Grad Celsius</p>
Temperaturmessung in der Probe (Apfelsaft):
<meter value="28" max="150" high="100">28</meter> Grad Celsius.
</body>
</html>Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!
Zuletzt aktualisiert von .
