HTML: Nummerfeld & Zahlenfeld – So gehts!

Wenn du in HTML ein Nummernfeld einfügen möchtest dann geht das über ein normales Input Feld. Du musst dafür nur den Type „number“ definieren.

HTML-Elemente Nummernfeld und Zahlenfeld einfügen

In HTML stehen verschiedene Elemente zur Verfügung, um numerische Eingaben von Benutzern zu erfassen. Die Wahl des richtigen Elements hängt von deinen spezifischen Anforderungen ab:

input type=“number“:

• Dies ist das standardmäßige Element für numerische Eingaben in HTML5.
• Es bietet verschiedene Funktionen zur Validierung und Einschränkung der Eingabe, z. B.:
  • min und max: Festlegen eines Mindest- und Höchstwertes
  • step: Festlegen des Inkrements für die Pfeil-Schaltflächen
  • value: Festlegen eines Startwerts
• Moderne Browser rendern dieses Element oft als Spinnelement mit Pfeil-Schaltflächen zur einfachen Wertänderung.

Beispiel:

<label for="zahl">Zahl eingeben:</label>
<input type="number" id="zahl" name="zahl" min="0" max="100" value="50">

input type=“text“ mit inputmode=“numeric“:

• Dieses Element kann für numerische Eingaben verwendet werden, bietet aber weniger Funktionen zur Validierung als input type="number".
• Es kann jedoch hilfreich sein, wenn du die Eingabe von Dezimalstellen, negativen Zahlen und anderen Sonderzeichen ermöglichen möchtest.
• Mit dem Attribut inputmode="numeric" wird die Tastatur auf einem mobilen Gerät so optimiert, dass sie numerische Eingaben erleichtert.

Beispiel:

<label for="dezimalzahl">Dezimalzahl eingeben:</label>
<input type="text" id="dezimalzahl" name="dezimalzahl" inputmode="numeric" value="3.14">

input type=“range“:

• Dieses Element wird für die Eingabe eines Werts innerhalb eines bestimmten Bereichs verwendet.
• Es bietet einen Schieberegler zur visuellen Auswahl des Werts.

Beispiel:

<label for="alter">Alter:</label>
<input type="range" id="alter" name="alter" min="18" max="100" value="30">

Zusätzliche Optionen:

• Du kannst JavaScript verwenden, um die Funktionalität der numerischen Eingabefelder weiter zu optimieren, z. B. durch die Formatierung der Eingabe, die Überprüfung der Gültigkeit und die Behandlung von Sonderfällen.
• Bibliotheken wie jQuery und Bootstrap bieten oft zusätzliche Funktionen und Vereinfachungen für die Arbeit mit numerischen Eingabefeldern.

Welches Element du verwenden solltest, hängt von deinen spezifischen Anforderungen ab.

• Wenn du eine einfache numerische Eingabe mit Validierung und Einschränkung benötigst, ist input type="number" die beste Wahl.
• Wenn du mehr Flexibilität bei der Eingabeformatierung oder die Eingabe von Dezimalstellen und Sonderzeichen benötigst, ist input type="text" mit inputmode="numeric" eine gute Option.
• Wenn du die Eingabe eines Werts innerhalb eines Bereichs mit einem Schieberegler ermöglichen möchtest, ist input type="range" die richtige Wahl.