Eingabefeld Typ Zahl mit Dezimalzahlen: So wird's gemacht

Lukas Fuchs vor 3 Monaten Frontend-Entwicklung 3 Min. Lesezeit

HTML-Code für ein Eingabefeld vom Typ Zahl mit Dezimalzahlen

Um ein Eingabefeld vom Typ Zahl mit Dezimalzahlen zu erstellen, verwende den folgenden HTML-Code:

<input type="number" step="0.01">

Eingabemodus "Zahl" festlegen

Der type-Attributwert "number" weist den Browser an, das Eingabefeld als Zahlenfeld zu behandeln und ermöglicht dir die Eingabe numerischer Werte, einschließlich Dezimalzahlen.

Dezimalgenauigkeit festlegen

Der step-Attributwert "0,01" gibt die Dezimalgenauigkeit an. In diesem Fall kannst du Dezimalzahlen mit einem Hundertstel Genauigkeit eingeben (z. B. 12,34 oder 56,78).

Festlegen von Höchst- und Mindestwert

Warum Höchst- und Mindestwerte festlegen?

Beim Festlegen von Höchst- und Mindestwerten für ein numerisches Eingabefeld bestimmst du den zulässigen Zahlenbereich, den Benutzer eingeben können. Dies ist nützlich, um Fehler oder ungültige Eingaben zu verhindern. Beispielsweise kannst du einen Mindestwert von 0 festlegen, um negative Zahlen für ein Feld zu verbieten, in dem die Anzahl der Artikel in einem Warenkorb eingegeben wird.

Wie man Höchst- und Mindestwerte festlegt

Verwende folgende Attribute:

min: Der minimale zulässige Wert
max: Der maximale zulässige Wert

Diese Attribute werden wie folgt im HTML-Code verwendet:

<input type="number" min="0" max="100">

Dadurch wird ein Eingabefeld erstellt, in das Benutzer nur Zahlen zwischen 0 und 100 eingeben können.

Grenzwerte erzwingen

Beachte, dass diese Attribute zwar Grenzwerte festlegen, sie aber nicht erzwingen. Benutzer können immer noch falsche Werte über die Tastatur oder durch Bearbeiten des HTML-Codes eingeben. Wenn du die Werte erzwingen möchtest, musst du Client-seitige Validierung oder server-seitige Skripte verwenden.

Tipps zur Verwendung von Grenzwerten

Verwende realistische Grenzwerte, die für die Anwendung sinnvoll sind.
Vermeide die Verwendung zu enger Grenzwerte, da dies die Benutzererfahrung einschränken kann.
Überlege dir, ob du benutzerdefinierte Fehlermeldungen bereitstellen möchtest, wenn Grenzwerte überschritten werden.

Schrittweite für Dezimalzahlen definieren

Die Schrittweite legt fest, in welchen Abständen Dezimalzahlen im Eingabefeld eingegeben werden können. Möchtest du beispielsweise, dass Dezimalzahlen nur in Schritten von 0,5 eingegeben werden (z. B. 1,5, 2, 0, 2,5 usw.), kannst du dies über das Attribut step definieren.

Schritte festlegen

Um die Schrittweite festzulegen, gibst du den Wert für das Attribut step an. Der Wert stellt den Abstand zwischen den zulässigen Dezimalzahlen dar.

<input type="number" step="0.5">

Überlegungen zur Schrittweite

Benutzerfreundlichkeit: Wähle eine Schrittweite, die für deine Anwendung sinnvoll ist. Vermeide zu kleine Schritte, die die Eingabe mühsam machen, oder zu große Schritte, die zu ungenauen Eingaben führen könnten.
Datengenauigkeit: Berücksichtige die Genauigkeit deiner Daten. Wenn du Rundungsfehler vermeiden möchtest, wähle eine Schrittweite, die den kleinsten Dezimalwert darstellt, den du benötigst.

Mindest- und Höchstwert berücksichtigen

Wenn du Mindest- oder Höchstwerte für das Eingabefeld festgelegt hast, muss die Schrittweite mit diesen Werten kompatibel sein. Beispielsweise kannst du die Schrittweite nicht auf 0,5 setzen, wenn der Mindestwert 1,0 beträgt.

Negative Schrittweiten

Negative Schrittweiten sind möglich, ermöglichen es dir jedoch nur, Dezimalzahlen in negativen Schritten einzugeben.

Deaktivieren des Feldes

Manchmal musst du ein Eingabefeld vom Typ Zahl deaktivieren, um Benutzer daran zu hindern, Änderungen am Wert vorzunehmen. Dies kann nützlich sein, wenn du einen schreibgeschützten Wert anzeigen oder verhindern möchtest, dass Benutzer Fehler machen.

Du kannst ein Eingabefeld mithilfe des HTML-Attributs disabled deaktivieren:

<input type="number" disabled>

Das disabled-Attribut teilt dem Browser mit, dass das Feld nicht bearbeitet werden kann. Der Benutzer kann nicht in das Feld klicken oder seinen Wert ändern.

Wann solltest du ein Feld deaktivieren?

Es gibt mehrere Szenarien, in denen du ein Feld vom Typ Zahl deaktivieren solltest:

Schreibgeschützte Werte: Wenn du einen Wert nur anzeigen möchtest, ohne dass Benutzer ihn ändern können.
Nicht editierbare Felder: Wenn ein Wert nicht bearbeitet werden soll, beispielsweise ein ID-Feld oder ein berechneter Wert.
Fehlervermeidung: Um Benutzer daran zu hindern, falsche oder ungültige Werte einzugeben.
Gleichzeitige Bearbeitung: Um zu verhindern, dass mehrere Benutzer gleichzeitig dasselbe Feld bearbeiten und Konflikte verursachen.

Auswirkungen der Deaktivierung eines Feldes

Das Deaktivieren eines Feldes hat folgende Auswirkungen:

Benutzerinteraktion: Benutzer können nicht in das Feld klicken oder seinen Wert ändern.
Schaltflächen: Deaktivierte Felder können nicht als Auslöser für Schaltflächen oder andere Formularaktionen verwendet werden.
Zugänglichkeit: Deaktivierte Felder werden von Bildschirmlesegeräten als deaktiviert erkannt und können nicht bearbeitet werden.

Tipps

Verwende folgende Tipps, um die Deaktivierung von Feldern effektiv zu nutzen:

Verwende Beschriftungen: Verwende beschreibende Beschriftungen für deaktivierte Felder, um den Benutzern mitzuteilen, warum sie nicht bearbeitet werden können.
Gib Feedback: Informiere Benutzer visuell über deaktivierte Felder, indem du sie beispielsweise ausgraust oder einen deaktivierten Status anzeigst.
Ermögliche die Reaktivierung: Wenn du ein Feld vorübergehend deaktivierst, überlege, ob du eine Möglichkeit bieten kannst, es später wieder zu aktivieren.

Platzhaltertext für leere Felder

Ein Platzhaltertext kann verwendet werden, um Benutzern einen Hinweis darauf zu geben, welche Art von Informationen in ein Eingabefeld eingegeben werden sollen. Dies ist besonders nützlich für Felder, die bestimmte Einschränkungen haben, wie z. B. Eingabefelder für Zahlen.

Verwendung des Platzhalterattributs

Um einen Platzhaltertext in ein Eingabefeld einzufügen, verwende das Attribut placeholder. Der Wert des Attributs ist der Text, der im Feld angezeigt werden soll, wenn es leer ist.

<input type="number" step="0.01" placeholder="Geben Sie eine Dezimalzahl ein">

Ausrichtung des Platzhaltertextes

Standardmäßig wird der Platzhaltertext in der oberen linken Ecke des Eingabefeldes ausgerichtet. Du kannst die Ausrichtung jedoch mit CSS ändern.

input::-webkit-input-placeholder {
  text-align: center;
}

Barrierefreiheitserwägungen

Platzhaltertexte sollten nicht als Ersatz für Etiketten verwendet werden. Etiketten sind für barrierefreie Websites unerlässlich, da sie Screenreadern helfen, Benutzern die Funktion eines Eingabefeldes mitzuteilen. Stelle also sicher, dass jedes Eingabefeld auch ein Etikett hat.

Eingabe nur positiver oder negativer Zahlen

Möchtest du sicherstellen, dass Benutzer in deinem Eingabefeld vom Typ Zahl ausschließlich positive oder negative Werte eingeben, kannst du die folgenden Attribute verwenden:

Positiv oder Null

Das Attribut min kann verwendet werden, um den Mindestwert auf 0 festzulegen, was die Eingabe positiver oder nullwertiger Zahlen ermöglicht.

<input type="number" min="0">

Negativ oder Null

Um negative oder nullwertige Zahlen zuzulassen, kannst du das Attribut max auf 0 setzen.

<input type="number" max="0">

Nur positiv

Wenn du nur positive Zahlen zulassen möchtest, musst du die Attribute min und max wie folgt kombinieren:

<input type="number" min="0.01" max="Infinity">

Hierbei ist 0.01 die kleinste zulässige positive Zahl und Infinity die größte zulässige positive Zahl.

Nur negativ

Für die Zulassung ausschließlich negativer Zahlen verwendest du folgende Attribute:

<input type="number" min="-Infinity" max="-0.01">

Hierbei ist -Infinity die kleinste zulässige negative Zahl und -0.01 die größte zulässige negative Zahl.

Hinweis: Browser unterstützen möglicherweise nicht alle Werte für min und max. Überprüfe daher immer die Browserkompatibilität deiner Implementierung.

CSS-Styling des Eingabefeldes

Nachdem du dein Eingabefeld definiert hast, kannst du es mit CSS stylen, um sein Aussehen an dein Design anzupassen. Hier sind einige Optionen:

Größe und Positionierung

width: Legt die Breite des Eingabefeldes fest.
height: Legt die Höhe des Eingabefeldes fest.
margin: Legt den Abstand zwischen dem Eingabefeld und anderen Elementen fest.
padding: Legt den Innenabstand innerhalb des Eingabefeldes fest.

Farbe und Schriftart

color: Legt die Farbe des Textes im Eingabefeld fest.
font-family: Legt die Schriftart des Textes fest.
font-size: Legt die Schriftgröße des Textes fest.
background-color: Legt die Hintergrundfarbe des Eingabefeldes fest.

Rahmen und Schatten

border: Legt den Stil, die Breite und die Farbe des Rahmens um das Eingabefeld fest.
border-radius: Legt den Rundungsradius der Ecken des Eingabefeldes fest.
box-shadow: Legt einen Schatten um das Eingabefeld fest.

Zusätzliche Stile

text-align: Richtet den Text innerhalb des Eingabefeldes aus (z. B. links, zentriert, rechts).
placeholder-color: Legt die Farbe des Platzhaltertextes fest.
font-weight: Legt die Schriftstärke des Textes fest (z. B. normal, fett, kursiv).

Tipp: Verwende CSS-Frameworks wie Bootstrap oder Materialize, um schnell und einfach ansprechende Eingabefelder zu erstellen.

Browserkompatibilität

Bei der Verwendung des Eingabefelds vom Typ Zahl mit Dezimalzahlen ist es wichtig, sich der Browserkompatibilität bewusst zu sein. Nicht alle Browser unterstützen alle Funktionen gleichermaßen.

HTML5-Unterstützung

Das Eingabefeld vom Typ Zahl wurde in HTML5 eingeführt. Die meisten modernen Browser unterstützen diese Funktion. Allerdings solltest du dir der folgenden Unterschiede bewusst sein:

Internet Explorer: Internet Explorer 11 unterstützt das Eingabefeld vom Typ Zahl mit Dezimalzahlen nicht.
Microsoft Edge: Microsoft Edge unterstützt das Eingabefeld vom Typ Zahl mit Dezimalzahlen ab Version 12.
Safari: Safari unterstützt das Eingabefeld vom Typ Zahl mit Dezimalzahlen ab Version 5.1.

Unterstützung für Funktionen

Zusätzlich zur allgemeinen HTML5-Unterstützung bieten bestimmte Browser zusätzliche Funktionen für das Eingabefeld vom Typ Zahl mit Dezimalzahlen:

Höchst- und Mindestwerte: Alle modernen Browser unterstützen das Festlegen von Höchst- und Mindestwerten.
Schrittweite für Dezimalzahlen: Die meisten modernen Browser unterstützen das Definieren einer Schrittweite für Dezimalzahlen. Allerdings kann die Implementierung je nach Browser variieren.
Deaktivieren des Feldes: Alle modernen Browser unterstützen das Deaktivieren des Eingabefeldes.
Platzhaltertext: Alle modernen Browser unterstützen die Verwendung von Platzhaltertext für leere Felder.
Eingabebeschränkungen: Die meisten modernen Browser unterstützen das Einschränken der Eingabe auf positive oder negative Zahlen.

Fallback-Optionen

Wenn du sicherstellen möchtest, dass dein Eingabefeld vom Typ Zahl mit Dezimalzahlen in allen Browsern funktioniert, kannst du Fallback-Optionen verwenden. Dazu kannst du ein Textfeld verwenden und es mit einer JavaScript-Bibliothek wie jQuery oder Vue.js validieren.

Testen der Kompatibilität

Um die Browserkompatibilität deines Eingabefelds vom Typ Zahl mit Dezimalzahlen zu testen, kannst du Online-Tools wie BrowserStack oder LambdaTest verwenden. Diese Tools ermöglichen dir, deine Website in verschiedenen Browsern und Versionen zu testen.

Barrierefreiheitserwägungen

Bei der Erstellung eines Eingabefelds vom Typ "Zahl mit Dezimalzahlen" ist es wichtig, die Barrierefreiheit für alle Nutzer zu berücksichtigen. Im Folgenden findest du einige Überlegungen, die dir dabei helfen:

Alternativtexte für Bildschirmlesegeräte

Füge dem Eingabefeld einen eindeutigen aria-label-Attribut hinzu, der die Funktion und den Zweck des Feldes beschreibt. Dies hilft Bildschirmlesegeräten, den Nutzern den Kontext zu vermitteln.

Tastaturzugänglichkeit

Stelle sicher, dass das Eingabefeld mit der Tastatur fokussiert und navigiert werden kann. Verwende die tabindex-Attribute, um die Tabreihenfolge zu steuern.
Aktiviere die Verwendung von Pfeiltasten, um die eingegebenen Zahlen zu erhöhen oder zu verringern.

Farbkontrast und Schriftgröße

Wähle Farben für das Eingabefeld und den Text, die einen ausreichenden Kontrast aufweisen, um die Lesbarkeit für alle Nutzer zu gewährleisten.
Stelle sicher, dass die Schriftgröße groß genug ist, damit sie von allen Nutzern leicht gelesen werden kann.

Eingabeaufforderungen und Fehlermeldungen

Biete klare und prägnante Eingabeaufforderungen, die den Nutzern genau mitteilen, welche Informationen sie eingeben sollen.
Verwende eindeutige und spezifische Fehlermeldungen, um Nutzern zu helfen, Fehler zu identifizieren und zu beheben.

Unterstützung für assistive Technologien

Stelle sicher, dass das Eingabefeld mit assistierenden Technologien wie Bildschirmlesegeräten und Spracherkennungssoftware kompatibel ist.
Verwende semantische HTML-Elemente (<input type="number">), um assistierenden Technologien die Identifizierung des Eingabefeldtyps zu erleichtern.

Tipps zur Fehlerbehandlung

Überprüfen auf ungültige Eingaben

Verwende das validity.valid-Attribut, um zu überprüfen, ob die Eingabe gültig ist. Wenn false zurückgegeben wird, ist die Eingabe ungültig.

Fehlermeldungen anzeigen

Füge dem Eingabefeld die Attribute setCustomValidity() und willValidate hinzu. Wenn die Eingabe ungültig ist, kannst du eine benutzerdefinierte Fehlermeldung mit setCustomValidity() festlegen.

Benutzerfreundliches Feedback

Biete klare Anweisungen und Beispiele für gültige Eingaben.
Verwende einprechsame Fehlermeldungen, die den Benutzern helfen, den Fehler zu verstehen.
Hebe hervorgehobene Eingabefelder hervor, um die Aufmerksamkeit auf mögliche Fehler zu lenken.

Validierung in Echtzeit

Verwende JavaScript, um die Eingabe in Echtzeit zu validieren. Dies gibt den Benutzern sofortiges Feedback und verhindert, dass sie ungültige Eingaben absenden.

Validierung bei Formularübermittlung

Verwende HTML5-Formatierungsbeschränkungen, um die Eingabe bei der Formularübermittlung zu überprüfen.
Füge dem Formular das Attribut novalidate hinzu, um die native HTML5-Validierung zu deaktivieren und eine benutzerdefinierte Validierungslösung zu implementieren.

Testen der Kompatibilität

Teste das Eingabefeld in verschiedenen Browsern und auf verschiedenen Geräten, um die Kompatibilität sicherzustellen.
Verwende Tools wie BrowserStack oder LambdaTest, um automatisierte Kompatibilitätstests durchzuführen.