HTML5 führt ein neues Element namens progress ein, das verwendet werden kann, um Fortschrittsanzeigen bei länger dauernden Prozessen zu realisieren. Die Art, wie dieses neue Element in Browsern dargestellt werden soll, war zum Redaktionszeitpunkt jedoch noch nicht abschließend geklärt.

Beispiel

<form method="post" action="fragebogen-auswertung.php">
<fieldset id="fset1" style="display: none;">
<p>Dein Name: 
<input type="text" name="name" size="40"></p>
<p><progress max="4" value="1">Schritt 1 / 4</progress></p>
<p><input type="button" value=" >> " onclick="show_fset(2)"></p>
</fieldset>
<fieldset id="fset2" style="display: none;">
<p>Deine Hobbies: 
<input type="text" name="hobbies" size="40"></p>
<p><progress max="4" value="2">Schritt 2 / 4</progress></p>
<p><input type="button" value=" >> " onclick="show_fset(3)"></p>
</fieldset>
<fieldset id="fset3" style="display: none;">
<p>Dein größter Wunsch: 
<input type="text" name="wunsch" size="40"></p>
<p><progress max="4" value="3">Schritt 3 / 4</progress></p>
<p><input type="button" value=" >> " onclick="show_fset(4)"></p>
</fieldset>
<fieldset id="fset4" style="display: none;">
<p>Dein größter Erfolg: 
<input type="text" name="erfolg" size="40"></p>
<p><progress max="4" value="4">Schritt 4 / 4</progress></p>
<input type="submit" value="Das war's!">
</fieldset>
<script>
function show_fset(n) {
  switch(n) {
    case 1:
       document.getElementById('fset1').style.display = "block";
       break;
    case 2:
       document.getElementById('fset1').style.display = "none";
       document.getElementById('fset2').style.display = "block";
       break;
    case 3:
       document.getElementById('fset2').style.display = "none";
       document.getElementById('fset3').style.display = "block";
       break;
    case 4:
       document.getElementById('fset3').style.display = "none";
       document.getElementById('fset4').style.display = "block";
       break;
    default: break;
  }
}
show_fset(1);
</script>
</form>

Erläuterung

Das obige Beispiel realisiert mit Hilfe von etwas CSS und einem kleinen JavaScript ein Formular, das dem Anwender in Form mehrerer Einzelschritte präsentiert wird. Auf die dabei verwendeten Techniken wird an dieser Stelle nicht näher eingegangen. Zur Anzeige der einzelnen Schritte wird das progress-Element verwendet.

Das erste von vier Fieldsets im Browser

Das progress-Element erhält üblicherweise zwei Attribute: mit dem Attribut max wird ein numerischer Zielwert vorgegeben, und das Attribut value enthält den aktuellen Wert, so wie im obigen Beispiel etwa bei <progress max="4" value="1">Schritt 1 / 4</progress>. Der Elementinhalt ist unabhängig von den Attributwerten. Er kann aus Text und anderen Elementen (Phrasing-Context) bestehen. Die Aufgabe des Elementinhalts ist die sichtbare Visualisierung des max-value-Verhältnisses.

Um etwa einen Prozentwert zu realisieren, weisen Sie dem max-Attribut den Wert 100 zu, und dem value-Attribut den jeweils aktuellen Prozentwert.

Weitere Hinweise

Das progress-Element ist nicht dazu gedacht, um anteilsmäßige Werte darzustellen, die aber zu keinem aktuellen Prozess gehören, also zum Beispiel der belegte und freie Speicher auf dem Server. Für solche Anzeigen ist das meter-Element gedacht (siehe Metrische Werte).

Das obige Beispiel kommt mit einer Reihe von progress-Elementen aus, die im HTML-Code mit Werten vorbelegt und von keinem Script geändert werden. Der typischere Anwendungsfall sind aber sicherlich Fortschrittsanzeigen, die von einem JavaScript laufend verändert werden. Dazu ist allerdings nicht nur ein Script erforderlich, dass die Anzeige laufend verändert, sondern auch ein dahinter stattfindender Prozess, der laufend Auskunft über seinen Fortschritt gibt.

Referenzinformationen

• Elementreferenz <progress>
• Attributreferenz: max
• Attributreferenz: value

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.