HTML/Tutorials/Formulare/input/number
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.
Inhaltsverzeichnis
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
<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.
Schieberegler
<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>
Ein vertikaler Schieberegler
Gerade bei Größen und Höhenangaben ist es oft attraktiv einen vertikalen Schieberegler zu haben.
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 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.
-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.
<input type="range" multiple value="10,80">
Lea Verou hat einen kleinen Polyfill programmiert, mit dem Sie es jetzt schon ausprobieren können:
- Lea Verou: Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders
- Lea Verou: Multirange Demo
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
: wietext
, Optimierungen für eine Suche möglich -
email
: wietext
, Optimierungen für die Eingabe von E-Mail-Adressen möglich -
url
: wietext
, 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
<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>