Tutorials

Tutorial: Zahlenformate in Formularen meistern – Validierung, Hilfetexte und Formatierung

Melden

Hier ist ein ausführliches Tutorial, wie du in Web-Formularen (HTML/JavaScript) Zahlenformate erzwingst, Hilfetexte einfügst und die optische Formatierung anwendest.

Dieses Tutorial zeigt dir, wie du sicherstellst, dass Benutzer Daten korrekt eingeben, wie du sie dabei unterstützt und wie die Zahlen ansprechend formatiert werden.

Wichtiger Hinweis: Jahreszahlen (z. B. 2024) werden in diesem Tutorial von der Formatierung ausgeschlossen, da sie keine Tausendertrennzeichen erhalten sollten.

1. Das richtige Eingabefeld wählen (Enforcement)

Der erste Schritt besteht darin, dem Browser mitzuteilen, dass nur Zahlen erlaubt sind.

HTML5-Attribut type="number": Dies erzwingt auf Mobilgeräten die numerische Tastatur und verhindert (meistens) die Eingabe von Buchstaben.

<label for="umsatz">Geplanter Umsatz (€):</label>
<input type="number" id="umsatz" name="umsatz" step="0.01" min="0">
  • step="0.01": Erlaubt Dezimalstellen (Cent-Beträge).
  • min="0": Verhindert negative Zahlen.

2. Hilfetexte einfügen (Insert Help Text)

Benutzer müssen wissen, welches Format erwartet wird. Hierfür gibt es drei gängige Methoden:

  • Placeholder: Ein Text innerhalb des Feldes (verschwindet bei Eingabe).
  • Small-Tag: Ein permanenter Hinweis unter dem Feld.
  • Aria-Describedby: Für Barrierefreiheit.
<div class="form-group">
    <label for="gewicht">Gewicht (kg):</label>
    <input type="number" id="gewicht" aria-describedby="gewichtHilfe">
    <small id="gewichtHilfe">Bitte geben Sie das Gewicht in Kilogramm ein (z. B. 75,5).</small>
</div>

3. Formatierung anwenden (Apply Number Formatting)

Während der Eingabe ist es oft schwierig, Formatierungen wie Tausendertrennzeichen anzuzeigen. Deshalb formatiert man die Zahl meistens, sobald der Benutzer das Feld verlässt (blur-Event).

JavaScript-Beispiel für Währungen und Zahlen:

Wir nutzen das Intl.NumberFormat Objekt, welches die lokale Formatierung (z. B. de-DE für Deutschland) perfekt beherrscht.

const inputFeld = document.getElementById('umsatz');

inputFeld.addEventListener('blur', function(e) {
    let wert = parseFloat(e.target.value);

    if (!isNaN(wert)) {
        // Formatierung auf Deutsch (z.B. 1.000,50 €)
        const formatierterWert = new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR'
        }).format(wert);

        // Achtung: Wenn man den Wert im Input-Feld ändert, 
        // wird aus type="number" oft type="text", 
        // da das Euro-Zeichen kein Number-Format ist.
        e.target.type = 'text'; 
        e.target.value = formatierterWert;
    }
});

// Beim Reinklicken das Format wieder entfernen, um Bearbeitung zu ermöglichen
inputFeld.addEventListener('focus', function(e) {
    if (e.target.value !== "") {
        // Entferne Währungszeichen und Punkte für die Bearbeitung
        let reinzahl = e.target.value.replace(/[^0-9,.-]+/g, "").replace(",", ".");
        e.target.type = 'number';
        e.target.value = reinzahl;
    }
});

4. Sonderfall: Jahreszahlen ignorieren

Jahreszahlen sind technisch gesehen Zahlen, sollten aber nie formatiert werden (ein Tausendertrennzeichen wie "2.024" ist falsch).

Regel: Behandle Jahreszahlen immer als Text oder einfache Ganzzahlen ohne Formatierungsfunktion.

<!-- Jahreszahlen als einfaches Textfeld mit Pattern-Schutz -->
<label for="jahr">Gründungsjahr:</label>
<input type="text" id="jahr" name="jahr" 
       pattern="\d{4}" 
       maxlength="4" 
       placeholder="YYYY">
<small>Geben Sie das Jahr vierstellig ein (z. B. 1995).</small>

Warum type="text" für Jahre?

  1. Es erscheinen keine "Spinner-Buttons" (Hoch/Runter-Pfeile).
  2. Es werden keine automatischen Formatierungen durch Skripte angewendet, die über alle input[type="number"] Felder laufen.

Zusammenfassung der Best Practices

  1. Validierung: Nutze min, max und step für logische Grenzen.
  2. Muster: Nutze das HTML-Attribut pattern="[0-9]*", um auf mobilen Geräten die Zehnertastatur zu erzwingen.
  3. Klarheit: Nutze label und small, um Einheiten (kg, €, m²) anzugeben.
  4. Lokalisierung: Nutze Intl.NumberFormat für die Anzeige, aber speichere in der Datenbank immer den reinen Float-Wert (mit Punkt als Dezimaltrenner).
  5. Ausnahme: Jahreszahlen, Postleitzahlen und IDs erhalten keine Tausendertrenner.
0