Bessere Formulare dank HTML5 und CSS3 - iX 09/2012

Mit Hilfe meines Arbeitgebers das MedienKombinat ist es mir möglich gewesen, einen Artikel in der Septemberausgabe der Fachzeitschrift iX zu veröffentlichen. Im Artikel geht es um HTML5 Fomulare, deren Styling mit CSS3 und den Vorteilen für mobile Endgeräte. Wer Interesse hat, kann mittlerweile alles online nachlesen.

Ich bedanke mich bei allen Beteiligten und wünsche euch viel Spaß damit. Wenn es Fragen dazu gibt, könnt ihr die hier oder im Forum der iX stellen.

Vortragsfolien: HTML5 & CSS3

Wer möchte hat, kann sich die Folien meines Vortrags zum Thema HTML5 & CSS3 anschauen. Der Vortrag soll Lust auf die neuen Technologien machen und zeigt auf, welche Möglichkeiten sich dabei bieten. Aufgrund der zeitlichen Begrenzung, konnte ich leider nicht zu sehr ins Detail gehen. Über Feedback würde ich mich trotzdem freuen!

Oh übrigens werden IE-User kein großes Vergnügen an den Folien haben, auch iPad-User könnten Probleme haben, für euch gibts daher eine vereinfachte Version der Slides.

HTML5 in progress

Nach langer Pause melde ich mich mal wieder zurück. Ja, mir gehts gut, ich war nur ziemlich abgelenkt und hatte daher wenig Lust zu Schreiben.

Jedenfalls dachte ich, wir sollten mal einen Blick auf ein neues HTML5 Form Element werfen: Das progress Element. Wie der Name schon sagt, kann man damit einen Fortschritt abbilden, meistens im Zusammenhang mit einem Formular. Dabei ist das geläufigste Beispiel ein Checkout in einem Internet-Shop, bei dem in der Regel mehrere Schritte nötig sind, bis die Ware verschickt wird.

Browserunterstützung

Browser
ab Version	6	–	11	6	–

Das Element ist Teil einer ganzen Reihe von neuen HTML-Tags und wird daher noch nicht von allen Browsern unterstützt. In Chrome und Opera geht es schon seit geraumer Zeit und Firefox wird ab Version 6 (kommt am 16.08.) vollständigen Support bieten. Leider hat auch das Update auf 5.1 bei Safari keine Unterstützung mitgebracht und beim IE weiß man nicht, ob und wann es überhaupt kommt.

Syntax

Um ein einfaches progress Element zu erzeugen reicht es, wenn ihr das bisschen Code benutzt:

HTML

1

<progress>in progress</progress>

Das erzeugt dann einen Fortschrittsbalken mit einer, je nach Browser, Standardbreite und einem Aussehen, das sich am Betriebssystem orientiert.

in progress

Wie ihr seht, ist das der Zustand, bei dem ein genauer Fortschritt ungewiss ist, man weiß nur, dass etwas im Gange ist. Der Text innerhalb des Elements ist zugleich ein Fallback für ältere Browser und für die Accessibility des Tags zuständig. Schaut man sich das Element also im IE an, sieht man nur den Text “in progress”, nicht aber einen Fortschrittsbalken.

Will man nun zeigen, dass etwas zu 25% abgeschlossen ist, muss man das dem Element in Form von Attributen sagen. progress hat derzeit zwei mögliche Attribute (abgesehen natürlich von class, id, style etc., die jedes Element besitzen kann).

1. max, der Maximalwert, entspricht 100% der Breite des Fortschrittsbalkens
2. value, der derzeitige Stand des Fortschrittsbalkens, kleiner-gleich max

Damit lassen sich jetzt z. B. diese drei Balken produzieren:

HTML

1
2
3

<progress value="0.5">50%</progress>
<progress value="25" max="100">25 aus 100</progress>
<progress value="800" max="1000">800</progress>

50%
25 aus 100
800

Wer will, kann das ganze auch per JavaScript animieren, dazu muss man nur den Wert von value überschreiben.

Styling per CSS

Zu aller erst sei gesagt, dass es sich hier um ein Inline-Element handelt, ähnlich dem img Tag. padding, margin, vertical-align und width haben also alle eine Wirkung auf unseren Fortschrittsbalken. Daneben gibt es noch Experimente mit Pseudo-Elementen wie ::-moz-progress-bar oder ::-webkit-progress-value (nur wenn -webkit-appearance auf none gestellt ist). Mozilla benutzt auch -moz-orient, um das Element auf den Kopf zu stellen.

Nun ja, das soll es dazu gewesen sein. Habt ihr das neuen Element schon benutzt? Könnt ihr euch vielleicht noch andere Anwendungsfälle vorstellen? Die Comments stehen euren Gedanklichen Ergüssen frei zur Verfügung!