Formular Workshop
Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
HTML5 Eingabetyp ''
range''type="range"
Stand:
Mit dem Eingabetyp "
range" können über einen grafisch dargestellten Schieber numerische Werte angegeben werden.Hier ein Screenshot aus dem Browser Opera 12:
Beispiel:
Quelltext:
<input type="range" name="auswertung">
Wie bei vielen Neuerungen in HTML5, so mancher Browser kann wegen fehlender Implementierung diesen neuen Typ noch nicht darstellen.
Falls dies der Fall sein sollte, dann wird ein einfaches Eingabefeld dargestellt.
Selbst die Darstellung bei korrekter Implementierung ist von Browser und Betriebssystem unterschiedlich.
Um dem Benutzer anzuzeigen, an welcher Stelle er den Regler gesetzt hat, kann man sich dem
output-Element bedienen:Beispiel:
Quelltext-Auszug:
<form oninput="numerisch.value=auswertung.value">
<input type="range" name="auswertung" min="0" max="10" value="5">
Punkte: <output name="numerisch">5</output>
</form>
In diesem Beispiel haben wir mehrere neue Attribute einfliessen lassen um darzustellen, wie sehr sich das
range-Element anpassen lässt.Zum Einen haben wir mit
min="0" und max="10" klar den Bereich festgelegt, der zur Verfügung steht. Mit value="5" haben wir festgelegt, an welcher Stelle der Regler beim Laden der Seite stehen soll. In den Standard-Einstellungen - also wenn man kein value-Attribut angibt - wird der Regler auf 50% gestellt.Nun kommt das
output-Element zum Zuge:Mit
<output> wird der Befehl begonnen und mit </output> wird dieser wieder beendet.Die Angaben zwischen
<output> und </output> ist nicht zwingend erforderlich, könnte jedoch dem Anwender helfen zu sehen, dass eine Ausgabe erfolgt. Falls dies aber auch mit einem eindeutigen Text deklariert ist ;-)Zusätzlich wurde im
output-Element das name-Attribut hinzugefügt. Der Sinn dahinter ist, dass dieses Feld angesprochen werden kann.Im einleitenden
form-Element wurde das Attribut oninput eingefügt. Hier wurde festgelegt, dass der Wert im Feld "numerisch" gleich dem Wert im Feld "auswertung" ist:oninput="numerisch.value=auswertung.valueWenn man im Web auf die Suche geht, findet man hier und da noch das Attribut
onforminput. Dieses Attribut ist noch sehr häufig anzufinden, gilt aber als veraltet.Wenn dieses Attribut verwendet wird, muss dieses im
output-Element eingetragen werden. Dann kann auch auf das name-Attribut im output-Element verzichtet werden:<output onforminput="value=auswertung.value">5</output>↑ zum Seitenanfang ↑