HTML progress, meter, output

Progress als Fortschrittsbalken

Mit progress (Fortschrittsbalken) und meter wandern visuelle Hilfsmittel ins HTML. Ein Fortschrittsbalken ist ein wichtiges Moment der Benutzerfreundlichkeit beim Datei-Upload und umfangreichen Aufgaben und Formularen. In der Vergangenheit erforderte der Fortschrittsbalken ein aufwändiges Script mit komplexen CSS.

progress, output und meter reduzieren das Skripting und halten das HTML-Markup in Formularen und Anwendungen übersichtlicher.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML progress

Formulare bauen schnell die Abwehrkräfte der Benutzer auf. Eine erste Maßnahme zur Verbesserung: den Benutzer über den Stand der Bearbeitung informieren.

progress stellt den Fortschritt einer Aufgabe dar, ist als Feedback für Benutzer gedacht und soll dem Benutzer zeigen, dass eine Aktion im Hintergrund abläuft (z.B. beim Laden einer großen Datei).

<progress></progress>

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.

Ohne den Einsatz von CSS und Javascript ist das progress-Element eine Bahn, in der ein kurzer blauer Streifen hin und her fährt und sagt: Warte, warte nur ein Weilchen ….

Designvorschläge CSS für HTML progress bar

progress – Attribute

Ein weiteres Anwendungsfeld von progress ist z.B. ein Feedback beim Ausfüllen eines langen Formulars oder der Fortschritt bei Aufgaben oder einem Quizz anhand der drei Attribute:

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:

<div>
   <input type="text" class="item" placeholder="…">
</div>
…
<div id="foo">0</div>
<progress id='progress' max='100' value="0" ></progress>
0
<script>
(function() {
	const items = document.querySelectorAll('.item');
	const progress = document.getElementById('progress');
	items.forEach (item => {
		item.onblur = function () {
			progress.value += 25;
			document.getElementById('foo').innerHTML = progress.value + ' %';
		}
	})
} () );
</script>

Das Script ist fragmentarisch und fängt das Löschen einer Eingabe nicht ab.

File-Upload und HTML progress

Wie weit ist der Datei-Upload und wie lang dauert es noch? Hinter einem Datei-Upload steckt fast immer eine PHP-Anwendung auf dem Server. Dabei käme es zu einem Refresh der Seite, wenn die Datei auf den Server geladen ist.

Um das erneute Laden der Seite zu vermeiden, werden Dateien im Hintergrund mit Ajax geladen. Während der gesamten Dauer des Ladevorgangs bleibt die Seite im Zustand loading. Der Fortschrittsbalken zeigt an, dass der Ladevorgang noch nicht beendet wurde.

Beispiel: AJAX
Mehrere Dateien auf den Server laden mit Javascript und PHP und HTML progress-Element.

HTML meter

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.

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 output-Tag

HTML output gehört zu den semantischen Elementen und gibt die Ergebnisse einer Berechnung aus – z.B. die aktuellen Werte eines Range-Sliders oder eines kleinen Online-Taschenrechners. Das erspart wieder einmal ein DIV oder SPAN ohne semantischen Nährwert und vereinfacht die Pflege des Formular-Markups.


<input type="number" name="num" id="num" value="159.90">
<output for="num" name="result" id="result"></output>
for
Setzt den Ausgabebereich in eine Beziehung zu den Paramtern der Berechnung, z.B.
<input type="range" id="range">
<output for="range"></output>
form
Ein oder mehrere Formulare, denen das meter-Element zugeordnet ist
name
name-Attribut des output-Elements für die serverseitige Anwendung