Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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.

Körpergröße in m (mit 2 Nachkommastellen):

Alter (0 bis 140):

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe