HTML Formulare
Ohne aufwändiges HTML, CSS und Javascript lehnten sich Formulare eng an ihre Vorläufer auf dem Papier: Unübersichtlich und öde bauen Formulare die Abwehrkräfte der Benutzer auf.
Eine erste Maßnahme zur Verbesserung: den Benutzer über den Stand der Bearbeitung informieren.
HTML meter
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 progress
progress stellt den Fortschritt einer Aufgabe dar und ist als Feedback für Benutzer gedacht. Eine Anwendungsfeld von progress ist z.B. als Feedback beim Ausfüllen eines langen Formulars oder der Fortschritt bei Aufgaben oder einem Quizz.
<progress></progress>
- 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="exc" placeholder="…"> </div> … <div id="foo">0</div> <progress id='progress' max='100' value="0" ></progress>
<script>
(function() {
var exc = document.querySelectorAll('.exc');
var progress = document.getElementById('progress');
for (var i=0; i< exc.length; i++) {
exc[i].onblur = function () {
if (this.value.length > 2) {
progress.value += 25;
document.getElementById('foo').innerHTML = progress.value + ' %';
}
}
}
} () );
</script>
Das Script ist fragmentarisch, fängt das Löschen einer Eingabe und Browser, die noch keinen Support für progress bieten (z.B. IE9), nicht ab.
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.
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.
Designvorschläge CSS für HTML progress bar
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