HTML/Tutorials/Formulare/input/number

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Formulare‎ | input(Weitergeleitet von Type="range")
Wechseln zu: Navigation, Suche

HTML5 bietet eine Vielzahl von neuen Eingabe-Typen für die Eingabe von Zahlen. Bei mobilen Geräten wird dann ein Nummernfeld eingeblendet, das die Eingabe erleichtert.

Falls ein älterer Browser diese nicht kennt, erscheint ein normales Eingabefeld vom type="text", das die Eingabe eines Datums ebenfalls zulässt, dann aber nicht vom Browser geprüft wird, sondern erst vom Server validiert werden muss.

type = "number"

Sie können ein Eingabefeld mit <input type="number"> nur auf Zahleneingaben beschränken.

Folgende Attribute können verwendet werden:

  • max: legt Maximalwert fest.
  • min: legt Mindestwert fest.
  • step: legt fest, in welchen Stufen die Werte (durch eine Scrollbar) eingegeben werden dürfen.
  • value: Vorbelegung mit einem bestimmten Wert

Berechnung des Body-Mass-Index

Zahleneingabe mit type="number" ansehen …
<form>
  <label for="groesse">
    Größe: 
    <input id="groesse" type="number" min="100" max="220" step="1" value="175">
    cm
  </label>
  <label for="masse">
    Masse: 
    <input id="masse" type="number" min="30" max="225" step="0.5" value="75">
    kg
  </label>
</form>

type = "range"

Das Eingabefeld <input type="range"> definiert einen Schieberegler (slider).


Folgende Attribute können verwendet werden:

  • max: legt Maximalwert fest. (Standardwert ist 100)
  • min: legt Mindestwert fest. (Standardwert ist 0)
  • step: legt fest, in welchen Stufen die Werte eingegeben werden dürfen.
    (Wenn als Minimalwert 0, als Maximalwert 1 und Step 1 eingegeben wird, hat man einen (zugegebenermaßen uneleganten) Kippschalter.)
  • orient: vertical legt fest, dass der Slider vertikal angezeigt werden soll
  • value: Vorbelegung mit einem bestimmten Wert, an dem der Schieberegler eingestellt ist.


Beachten Sie: In IE9 und älter wird anstelle des Schiebereglers ein Texteingabefeld dargestellt.
Empfehlung: Sie können dem Schieberegler mit einer datalist vorgeschlagene Werte als Sprungmarken zuordnen.

Schieberegler

Beispiel ansehen …
<figure>
  <img id="image" src="Autumn_Leaf.jpg" alt="Autumn leaves"/>
  <label for="grayscale">Verändern Sie die Graustufen</label>
  <input id="grayscale" type="range" min="0" max="100" value="30"/>
</figure>
Der Wert des Schiebereglers wird mit oninput ausgelesen und mit JavaScript als Wert für den grayscale() Graustufenfilter verwendet.
Beachten Sie: Der Schieberegler hat leider keine Anzeige des aktuellen Werts. Mit dem output-Element können Sie den aktuellen Wert z.B. in einer Sprechblase darstellen.

Ein vertikaler Schieberegler

Gerade bei Größen und Höhenangaben ist es oft attraktiv einen vertikalen Schieberegler zu haben.

vertikaler Schieberegler ansehen …
input[type="range"].vertikal {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 10px;
    height: 250px;
    background-image: repeating-linear-gradient(0deg, white, white 8%, black 8%, black 9%);
}
<form  oninput="x.value=parseInt(groesse.value)">
    <label for="groesse" id="n1">0cm</label> 
    <input class="vertikal" name="groesse" id="groesse" 
           type="range" min="0" value="80" max="250" 
           orient="vertical">
    <label for="groesse" id="n2">250cm</label>
    <output name="x" for="groesse">80</output>
</form>
Im Beispiel wird das Eingabefeld direkt angesprochen, wobei Sie aber unterschiedliche Angaben für die jeweiligen Browser machen müssen:
  • Im IE wird die Schreibrichtung geändert
  • Chrome und Opera werden über -webkit-appearance angesprochen
  • der Firefox benötigt ein Attribut orient="vertical" im HTML-Code.
Im IE und Firefox hat der Schieberegler durch den repeating-linear-gradient() ein Meterstab-ähnliches Hintergrundmuster bekommen. Für Chrome und Opera erfordert dies ein Ausschalten mittels -webkit-appearance: none;, was dann aber die vertikale Einstellung des Schiebereglers blockiert.

Eine weitere Möglichkeit wäre es, den Regler mit transform:rotate(270deg); zu drehen (270 Grad, damit der Nullpunkt unten ist.).

Da die Schieberegler unterschiedliche Maße haben (im IE ist er viel breiter als in den anderen Browsern), ist aber in dieser Version das Positionieren viel schwieriger.

Schieberegler mit Mehrfacheingaben (multirange)

In HTML5.1 wird neu ein Attribute multiple eingeführt, mit dem Sie Mehrfacheingaben ermöglichen können.

Schieberegler mit zwei verschiebbaren Eingabepunkten
<input type="range" multiple value="10,80">

Lea Verou hat einen kleinen Polyfill programmiert, mit dem Sie es jetzt schon ausprobieren können:

inputmode

Das inputmode-Attribut hilft mobilen Geräten, die richtige systemeigene Tastatur-(belegung) zu wählen. Eine Verwendung ist für input-Elemente mit den Typen text, password, email oder url sowie bei allen Elementen, für die contenteditable gesetzt ist, sinnvoll.

Folgende Werte sind möglich:

  • text: Standard-Text-Eingabetastatur, default-Wert
  • search: wie text, Optimierungen für eine Suche möglich
  • email: wie text, Optimierungen für die Eingabe von E-Mail-Adressen möglich
  • url: wie text, Optimierungen für die Eingabe von Internetadressen möglich
  • decimal: numerische Eingabetastatur
  • tel: Eingabetastatur für Telefonnummern
  • none: keine systemeigene Tastatur, Eingabesteuerung erfolgt durch die Webseite selbst


Beispiel ansehen …
<div contenteditable inputmode="text">text</div>
<div contenteditable inputmode="search">search</div>
<div contenteditable inputmode="email">email</div>
<div contenteditable inputmode="url">url</div>
<div contenteditable inputmode="decimal">decimal</div>
<div contenteditable inputmode="tel">tel</div>
<div contenteditable inputmode="none">none</div>


Weblinks