CSS, HTML und Javascript mit {stil}

HTML progress, meter, output

HTML progress

Mit progress (Fortschrittsbalken) und meter wandern diese visuellen Hilfsmittel ins HTML und reduzieren das Skripting.

Ein Fortschrittsbalken ist ein wichtiges Moment der Benutzerfreundlichkeit bei umfangreichen Aufgaben und Formularen. In der Vergangenheit erforderte der Fortschrittsbalken ein aufwändiges Script mit komplexen CSS.

Ohne aufwändiges Javascript lehnten sich Formulare eng an ihre Vorläufer auf dem Papier: unübersichtlich und öde gerade bei langen Formularen.

HTML meter

meter steht für Messwerte zwischen einem Minimum und einem Maximum. meter kann dem Benutzer z.B. die Benutzung des Speicherplatz vor Augen führen:

60
90
<meter value="50" min="0" max="100" high="90" low="10" optimum="60" />
    60
</meter>
form
Ein oder mehrere Formulare, denen das meter-Element zugeordnet ist
high
Der Bereich, der als hoch angesehen wird
low
Der Bereich, der als niedrig angesehen wird
max
Maximaler Wert des Bereichs
min
Minimaler Wert des Bereichs
optimum
Optimaler Wert des Bereichs
value
Erforderlich: der aktuelle Wert des meter-Bereichs

HTML progress

progress stellt den Fortschritt einer Aufgabe dar und ist als Feedback für Benutzer gedacht. Eine Anwendungsfeld von progress ist z.B. als Feedback beim Ausfüllen eines langen Formulars oder der Fortschritt bei Aufgaben oder einem Quizz.

<progress></progress>
max
Fließkommazahl, repräsentiert die Gesamtzeit für die Aufgabe. Vorgabe (default) ist 1.0.
value
Fließkommazahl, steht für den Fortschritt der Aufgabe. value muss zwischen 0 und 1 oder dem Wert des Attributs max liegen.
position
Aktuelle Position der progress-Anzeige (read only nur lesender Zugriff – per Skript).

Und so könnte eine Anwendung von progress in einem Formular aussehen:

0
<div>
   <input type="text" class="exc" placeholder="…">
</div>
…
<div id="foo">0</div>
<progress id='progress' max='100' value="0" ></progress>
<script>
(function() {
   var exc = document.querySelectorAll('.exc');
   var progress = document.getElementById('progress');
   for (var i=0; i< exc.length; i++) {
      exc[i].onblur = function () {
         if (this.value.length > 2) {
            progress.value += 25;
            document.getElementById('foo').innerHTML = progress.position * 100 + ' %';
         } 
      }
   } 
} () );
</script>

Das Script ist nur minimalistisch und fängt auch Browser, die noch keinen Support für progress bieten (z.B. IE9), nicht ab.

Das progress-Element wirkt unspektakulär. Das genaue Aussehen hängt von der Kombination von Betriebssystem und Browser ab, aber kann mit CSS in Form gebracht werden.

meter und progress sehen sich auf den ersten Blick sehr ähnlich, aber meter stellt einen festgelegten Bereich, in dem Minimum und Maximum bekannt sind. progress hingegen beginnt bei 0 und ended im Unbekannten, da beim Fortschritt einer Aufgabe nicht unbedingt bekannt ist, wann sie beendet wird.

CSS für HTML progress bar

output

output gehört zu den neuen semantischen Elementen und gibt die Ergebnisse einer Berechnung aus.

+
Ergebnis
for
Setzt den Ausgabebereich in eine Beziehung zu den Paramtern der Berechnung
form
Ein oder mehrere Formulare, denen das meter-Element zugeordnet ist
name
Name des output-Elements