Intelligente Formulare - HTML5 - page 51

Die Vorgabe für das pattern lautet, dass die Zeichenkette nur Zeichen zwischen
a und z (also Kleinbuchstaben) enthalten darf ( [a-z] ) und davon mindestens 3
und höchstens 32 . Umlaute und andere Sonderzeichen sind damit nicht erlaubt,
was für einen Benutzernamen, wie in oben stehendem Beispiel, auch ganz gut
sein kann. Wollte man zumindest die deutschen Umlaute und das scharfe ß
mit einbeziehen, müsste man die Gruppe um diese erweitern: [a-zäöüß] . Was
passiert, wenn die Überprüfung fehlschlägt, wird in Abschnitt 3.4, Clientseitige
Formular-Überprüfung, weiter ausgeführt.

3.3 Neue Elemente

3.3.1 Anzeigen von Messgrößen mit »meter«

Mithilfe des meter -Elements wird der Anteil an einer gewissen Größe grafisch
dargestellt. Denken Sie zum Beispiel an die Tankanzeige in Ihrem Auto: Die
Nadel zeigt den aktuellen Füllstand im Tank irgendwo zwischen 0 und 100 Pro-
zent an. Bisher wurden solche grafischen Darstellungen in HTML unter ande-
rem mit verschachtelten div -Elementen codiert, eine relativ unelegante Lö-
sung, die wohl etwas am Sinn des div -Elements vorbeigeht. Außerdem lässt
sich eine Statusanzeige auch grafisch, als Bild darstellen. Dabei können freie
Webservices herangezogen werden, wie zum Beispiel die Google Chart API . Alle
diese Möglichkeiten werden Sie im folgenden Beispiel sehen.

Die Verwendung des meter -Elements ist sehr einfach: Über das value -Attribut
wird der gewünschte Wert eingestellt; alle anderen Attribute sind optional.
Wird kein min - und max -Wert eingestellt, so verwendet der Browser 0 bezie-
hungsweise 1 für diese Attribute. Folgendes meter -Element zeigt also ein halb
volles Element an:
<meter value=0.5></meter>

Außer value , min und max gibt es noch die Attribute low , high und optimum , wobei
der Browser diese Werte in der Darstellung mit einbeziehen kann. So zeigt zum
Beispiel Google Chrome (im Sommer 2010 der einzige Browser, der das meter -
Element darstellen konnte) den ansonsten grünen Balken in Gelb an, wenn der
optimum -Wert überschritten wird.

Im folgenden Beispiel wird der Anteil der vergangenen Tage im aktuellen Jahr
grafisch dargestellt. Die Webseite soll die Ausgabe auf vier verschiedene Arten
visualisieren: als Text mit einer Angabe in Prozent, mithilfe des neuen meter -