CSS, HTML und Javascript mit {stil}

HTML meter, progress, output

HTML progress

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.

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

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

meter

meter steht für Messwerte zwischen einem Minimum und einem Maximum. HTML 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

progress

HTML 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