HTML/Elemente/progress
Aus SELFHTML-Wiki
Das progress-Element (engl. für Fortschritt, Verlauf) veranschaulicht den Fortschritt einer Aktion etwa bei der Bearbeitung eines Fragebogens.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- WAI‑ARIA‑Rolle
-
-
progressbar
(Details)
-
- Elternelemente
- Darf vorkommen in:
- erlaubte Inhalte
-
- Text
- beliebig viele Elemente mit phrasing content
- aber nicht progress
Beispiel
<label for="fortschritt">Fortschritt:</label>
<progress id="fortschritt" value="0" max="3">
<span role="status">1.5</span>
</progress>
- ein fehlendes
max
-Attribut wird mit dem Wert 1 initialisiert - der Wert des
value
-Attributs sollte kleiner als der desmax
-Attributes sein
Beachten Sie: Aus Gründen der Barrierefreiheit sollten Sie den aktuellen Status auch in den Inhalt des progress-Elementes schreiben.
Empfehlung: Benutzen Sie das progress-Element in Verbindung mit JavaScript, um den Fortschritt einer Aufgabe anzuzeigen.
Name | Inhalt | Standardwert | Bedeutung |
---|---|---|---|
Universalattribute | |||
id | ID | identifiziert ein einziges Element innerhalb eines Dokuments | |
class | CDATA | ordnet ein Element einer oder mehreren Klassen zu. | |
accesskey | ID | Tastaturkürzel | |
contenteditable | CDATA | editierbarer Inhalt | |
contextmenu | definiert Kontextmenü | ||
dir | ltr, rtl | definiert die Schreibrichtung innerhalb des Dokuments | |
draggable | ID | kann mit Drag & Drop gezogen werden | |
dropzone | CDATA | Aktion bei Ablegen | |
hidden | versteckter Inhalt | ||
lang | NAME | legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766] | |
spellcheck | ID | Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
| |
style | CDATA | notiert direkt in einem Element- style sheet data | |
tabindex | NAME | zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird. | |
title | CDATA | betitelt oder beschreibt ein Element. | |
max | NUMBER | 1 | gibt an, wieviele Schritte in der Fortschrittsanzeige möglich sind |
value | NUMBER | 0 | gibt die Anzahl der bisher abgearbeiteten Schritte an |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Siehe auch
- Formulare/Benutzereingaben zugänglich gestalten
(Fortschrittsanzeige mit progress)
Weblinks
- Spezifikation (W3C): The progress-Element