Zahlen in spinboxes (Auswahl-Feld)

Ein weitere Möglichkeit zur Überprüfung von Benutzereingaben sind Felder, die das number-Attribut nutzen. Es gibt viele Situationen, in denen man möchte, dass ein Nutzer eine Zahl auswählt. Klingt eigentlich ganz simpel. Aber sagen wir mal ich frage nach einer Zahl, dann könnte die Antwort -5 sein, auch wenn ich eigentlich eine Zahl zwischen 1 und 10 meinte. Kann man denn 3,75 auswählen? Naja, man kann das ganze auch ins Unendliche diskutieren, da man ja eigentlich voraussetzen kann, dass ich eine ganze Zahl meinte. Also, wie man sieht ist Nummer nicht gleich Nummer und man muss ein paar Grenzen setzen.

Und das macht das number Attribut so speziell -der Fakt, dass man die Spannweite der Zahlen, aus denen ein Benutzer auswählen kann, festlegen kann. Man kann die Auswahl auf Zahlen vom Typ integer begrenzen oder die Sprungweite festlegen, die per default auf 1 festgelegt ist. Wenn man den type="number" festlegt wird die inputbox als spinbox angezeigt.

Schauen wir uns das einfachste Beispiel an das man mit dem number type erstellen kann. Der kleinstmögliche Wert ist 1 und die Sprungweite beträgt ebenfalls 1 und es gibt keinen Maximalwert. Probiert das folgende Beispiel doch einfach mal aus und schaut was passiert und wie es aussieht:

<form>
<input type="number" required>
<input type="submit" value="Submit Now!">
</form>

Jetzt wollen wir unser Beispiel so erweitern, dass der Nutzer nur Zahlen zwischen 10 und 20 auswählen kann. Dazu müssen wir das min (kleinster akzeptierter Wert) und das max (größter akzeptierter Wert) Attribut definieren. Das sieht so aus:

<form>
<input type="number" min="10" max="20" required>
<input type="submit" value="Submit Now!">
</form>

Wie bereits erwähnt kann man auch die Sprungweite definieren. Das macht man über das step Attribut. Zusätzlich kann man über das value Attribut auch noch einen Wert vorgeben (weil es vielleicht ein sehr häufig gewählter Wert ist). Im folgenden Beispiel ist die Sprungweite auf 2 gesetzt und der voreingestellte Wert ist 16. Als Ergebnis erscheint dann das:

<form>
<input type="number" min="10" max="20" step="2" value="16" required>
<input type="submit" value="Submit Now!">
</form>

Wenn man die festgelegte Spanne verlassen will, werden einige Browser die Pfeile ausgrauen, andere lassen einen einfach nicht weiter klicken.

Was wir gelernt haben

• Der input type number zwingt den Nutzer dazu nichts anderes als Nummern einzutragen
• Die Schrittweite kann angepasst werden und ist per default 1
• Man kann mit den Attributen min und max die kleinst- und größtmöglichen Werte angeben
• Wenn das Minimum kein integer ist, ist die Schrittweite immernoch 1, dass heißt wenn das Minimum 2,2 ist wird die nächste Auswahl 3,2 sein
• Man kann die Schrittweite mit dem step Attribut festlegen
• Man kann einen vordefinierten Wert mit dem value Attribut festlegen