1. Startseite
2. HTML
3. Interaktive Elemente

Interaktive Elemente

Seit HTML5 gibt es ein paar Elemente, mit deren Hilfe die rein statische Seite etwas dynamischer wird.

Akkordeon

Mit dem <details>-Tag wird ein Bereich markiert, in dem der Inhalt versteckt wird. Durch ein Klick auf das Element <summary> wird der versteckte Inhalt wieder eingeblendet.

<details>
 <summary>
  Hier klicken um den Inhalt zu sehen.
 </summary>
 <p>
  Hier können Bilder, Texte und auch noch mehr "details"-Elemente angegeben werden.
 </p>
</details>

Durch ein Klick auf den sichtbaren Teil (<summary>) wird der restliche Inhalt von <details> im Browser dargestellt.

Fortschrittsanzeige

Um einen Fortschrittsbalken zu erzeugen, verwenden wir das Element <progress>

<progress> erwartet die beiden Attribute "max" und "value". Das Attribut "max" muss eine Ganzzahl sein, dessen Wert höher als 0 ist. Das Attribut "value" steht für den Fortschritt und muss einen Wert zwischen 0 und "max" haben.

<progress max="100" value="20">
20% geschafft.
</progress>

Aus Gründen der Barrierefreiheit sollte auch der Wert des Fortschritts im Element angegeben werden.

Skala

Mit dem <meter>-Tag können Werte in Form einer Skala visualisiert werden.

Um die Skala sogar farblich darzustellen, werden verschiedene Attribute benötigt. Das Attribut "value" steht für den aktuellen Wert, der durch den Einsatz diverser Programmiersprachen beeinflusst werden kann. Das Attribut "min" bezeichnet die untere Grenze der Skala. Das Attribut "low" bezeichnet die obere Grenze des Niedrig-Bereichs. Das Attribut "optimum" steht für den optimalen Wert in der Skala. Das Attribut "high" bezeichnet die untere Grenze des Hoch-Bereichs. Das Attribut "max" bezeichnet die obere Grenze der Skala.

<meter min="0" max="100" low="20" high="80" optimum="10" value="10">
</meter>

Die Einteilung Erfolg in maximal 3 Bereiche.

Der "optimum"-Bereich wird in grüner Farbe dargestellt:

<meter min="0" max="100" low="20" high="80" optimum="10" value="10">
</meter>

Der Bereich neben dem "optimum"-Bereich wird in gelber Farbe dargestellt:

<meter min="0" max="100" low="20" high="80" optimum="10" value="30">
</meter>

Alle anderen Bereiche werden demnach in roter Farbe dargestellt:

<meter min="0" max="100" low="20" high="80" optimum="10" value="90">
</meter>