Neue Formularelemente für Zahlen in HTML5

Mit HTML5 sind auch neue Formulareingabefelder verfügbar, die für mehr Komfort beim Nutzer und Sicherheit der Eingaben für den Programmierer sorgen!

Wir können wie bisher Eingaben über die Tastatur machen aber erhalten zusätzlich je nach Feldart weitere Eingabemöglichkeiten. Bei einem Zahlenfeld erhält man kleine Pfeile um den Wert zu erhöhen bzw. zu erniedrigen. Über die Tastatur sind für dieses Zahlenfeld nur noch sinnvolle Eingaben möglich.

Die wichtige Information dabei ist, dass bei alten Browserversionen automatisch ein Fallback stattfindet und einfach ein normales Eingabefeld angezeigt wird, wenn die alte Browserversion mit dem neuen HTML5-Formularelement nichts anfangen kann.

Das geht über den genialen Schachzug, dass unser <input-HTML-Anweisung einfach anstelle von dem Attribut type="input" die neue HTML5-Variante zugewiesen bekommt.

Bisher:

<input type="text" name="alter" size="3" value="">

Zahleneingaben über Formularfeld

Neues HTML5-Element um Zahlen zu erfassen:

<input type="number" name="alter" size="3" value="">

Wir haben mit dem Formularfeld vom Typ „number“ eine neue HTML5-Möglichkeit jetzt kennen gelernt. Und wir bekommen noch weitere Möglichkeiten bei der Erfassung der Zahlen.

Schrittweite der Zahleneingaben festlegen

In unserem Beispiel wollen wir das Alter einer Person erfassen. Hier wollen wir ganze Zahlen – niemand wird normalerweise eingeben, dass er 23,4 Jahre alt ist. Dazu erweitern wir unser HTML-Formularfeld um das Attribut step:

Alter:
<input type="number" step="1" name="alter" size="3" value="">

Über step="1" sind nur noch Schritte in ganzen Zahlen möglich.

Wollen wir allerdings die Körpergröße in Meter erfassen, wären wir mit ganzen Zahlen schlecht beraten. Hier wollen wir auch „1,74“ eingegeben können. Also lautet unsere Angabe bei step:

Körpergröße in m (mit 2 Nachkommastellen):
<input type="number" step="0.01" name="groesse" size="3" value="">

Bereich der möglichen Eingabewerte von Zahlen festlegen

Auch macht es oft Sinn, die möglichen bzw. sinnvollen Eingabewerte in einem Bereich festzulegen. Auch hierfür gibt es nun mit HTML5 das neue Attribut min.

Wir wollen bei unserem Eingabefeld für das Alter festlegen, dass man als Minimum 0 eingeben kann.

Alter (ab 0 Jahren):
<input type="number" step="1" min="0" name="alter" size="3" value="">

Und genauso können wir den oberen Wert festlegen. Bei Menschen ist bisher ein Alter über 140 Jahren (noch) nicht erreichbar. Also legen wir einen Maximalwert für unsere Zahleneingabe fest:

Alter (0 bis 140):
<input type="number" step="1" min="0" max="140" name="alter"
 size="3" value="">

Und wer testen mag – hier unsere 2 Eingabefelder. Je nach Browser werden diese anders angezeigt. Einfach auch einmal in einen anderen Browser testen.