HTML progress
progress, output und meter reduzieren das Skripting und halten das HTML-Markup in Formularen und Anwendungen übersichtlicher.
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>
<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 Bilder mit Javascript Fetch auf den Server laden.
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:
<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