HTML/Formulare/progress

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das progress-Element veranschaulicht einen Fortschritt einer Aktion etwa bei Bearbeitung eines Fragebogens in einer an Browser und Betriebssystem angepassten Darstellung. Progress bedeutet Fortschritt oder Verlauf.

  • IE 10
  • Leer
  • Leer
  • Leer
  • Leer
  • HTML5
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Fortschrittsanzeige</title> <style> label { display: block; width: 25em; padding: .2em; text-align: right;} label > * {width: 150px; margin: 0; padding: 0;} </style> <script> function aktualisiere_progressbar() { var anteil = 0; for (var k = 0; k < document.forms[0].elements.length; k++) { if (document.forms[0].elements[k].value != '') anteil++; } document.getElementById('fortschritt').value = anteil; } </script> </head> <body> <form> <h1>Ein kleines Formular</h1> <label>Bitte geben Sie Ihren Namen ein: <input type="text" placeholder="Mustermann" onchange="aktualisiere_progressbar()"></label> <label>Bitte geben Sie Ihren Vornamen ein: <input type="text" placeholder="Max" onchange="aktualisiere_progressbar()"></label> <label>Bitte geben Sie Ihren Wohnort ein: <input type="text" placeholder="Köln" onchange="aktualisiere_progressbar()"></label> <label>Fortschritt: <progress id="fortschritt" value="0" max="3"></progress></label> </form> </body> </html>
Dieses Beispiel zeigt eine dynamische Anpassung des Fortschritts mit JavaScript.
Beachten Sie: Aus Gründen der Barrierefreiheit sollten Sie den aktuellen Status auch in den Inhalt des progress-Elementes schreiben.
Beispiel
<progress value="65" max="100">Stand der Abarbeitung: 65%</progress>

Das W3C empfiehlt als Standardabmessungen 10em Breite und 1em Höhe. In den meisten Browserstylesheets ist das auch so umgesetzt.

[Bearbeiten] Attribute

Das progress-Element erwartet folgende Attribute:

  • max, gibt an, wieviele Schritte maximal möglich sind
  • value, Anzahl der abgearbeiteten Schritte

Dabei gelten folgende Regeln:

  • ein fehlendes max-Attribut wird mit dem Wert 1 initialisiert
  • der Wert des value-Attributs sollte kleiner als der des max-Attributes sein

[Bearbeiten] Ausblick

erweiterte Möglichkeiten

Die Spezifikation sieht vor dass in Abhängigkeit von den Abmessungen des progress-Elements verschiedene Darstellungen gerendert werden sollen.

  • height > width: Säulendiagramm (stehend)
  • height < width: Balkendiagramm (liegend)
  • height = width: Kreisdiagramm

[Bearbeiten] siehe auch

Referenz: progress

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML