Logo von www.onlex.de
Formular Workshop

Lerne das Erstellen von HTML-Formularen für deinen Onlex-Formmailer
Onlex auf Facebook verwenden Onlex auf Twitter verwenden

HTML5 Eingabetyp ''range''
type="range"

Logo des Browsers Chrome von GoogleLogo des Browsers Firefox von MozillaLogo des Browsers OperaLogo des Browsers Safari von AppleLogo des Browsers Internet Explorer von Microsoft
Stand:

Mit dem Eingabetyp "range" können über einen grafisch dargestellten Schieber numerische Werte angegeben werden.

Hier ein Screenshot aus dem Browser Opera 12:

Bildschirmfoto des Eingabetyps ''range'' im 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:

Punkte: 5

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.value

Wenn 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



© 2002 - 2022 · www.onlex.de - HomepageTools | Impressum | Sitemap