HTML Formular Validierung

E-Mail-Format prüfen, Pflichtfelder erzwingen, Zahlen begrenzen – HTML Formular Validierung macht's möglich! Und das ganz ohne JavaScript. In diesem Tutorial lernst du die wichtigsten Validierungsattribute.

Einführung in das HTML Formular Validierung Tutorial

Was ist Formular Validierung

Validierung prüft Nutzereingaben, bevor sie abgesendet werden. Browser zeigen automatisch Fehlermeldungen, wenn etwas nicht stimmt. Das spart Server-Anfragen und gibt sofortiges Feedback.

Warum HTML Validierung wichtig ist

• Sofortiges Feedback: Nutzer sehen Fehler direkt
• Weniger Server-Last: Ungültige Daten werden gar nicht erst gesendet
• Bessere UX: Keine Wartezeit auf Server-Antwort

Wichtig: HTML-Validierung ersetzt NICHT die serverseitige Prüfung! Sie kann umgangen werden.

Voraussetzungen

Benötigte HTML Grundkenntnisse

Du solltest HTML-Formulare verstehen. Falls nicht, hol das kurz nach!

Entwicklungsumgebung

Texteditor und Browser – mehr brauchst du nicht.

Schritt-für-Schritt-Anleitung

Schritt 1: Pflichtfelder mit required

Das einfachste Validierungsattribut:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Absenden</button>
</form>

Versuche, das Formular leer abzusenden – der Browser stoppt dich!

Schritt 2: Input-Typen für automatische Validierung

HTML5 Input-Typen validieren automatisch:

<input type="email" name="email">     <!-- Prüft @-Zeichen -->
<input type="url" name="website">     <!-- Prüft URL-Format -->
<input type="number" name="age" min="1" max="120">  <!-- Prüft Zahlenbereich -->
<input type="date" name="birthday">   <!-- Prüft Datumsformat -->

Schritt 3: Pattern für eigene Regeln

Mit regulären Ausdrücken definierst du eigene Formate:

<label for="phone">Telefon (Format: 0123-456789):</label>
<input type="text" id="phone" name="phone" 
       pattern="[0-9]{4}-[0-9]{6}" 
       title="Bitte verwende das Format: 0123-456789">

<label for="plz">Postleitzahl:</label>
<input type="text" id="plz" name="plz" 
       pattern="[0-9]{5}" 
       title="PLZ muss 5 Ziffern haben">

Das title-Attribut erscheint als Tooltip-Hinweis!

Schritt 4: Längen begrenzen

<!-- Textlänge -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Zahlenbereiche -->
<input type="number" name="alter" min="18" max="65">

<!-- Textarea -->
<textarea name="kommentar" maxlength="500"></textarea>

[bildapi id="form_validation_example" prompt="A clean, modern web form on a computer screen showing HTML form validation in action with friendly error messages in German, featuring input fields for email, password, and submit button with validation tooltips" name="html-form-validation-friendly-messages" alt="HTML Formular mit benutzerfreundlichen Validierungsmeldungen auf einem Computerbildschirm"]

Code-Beispiele zu HTML

Registrierungsformular

<form>
    <label for="username">Benutzername (3-20 Zeichen):</label>
    <input type="text" id="username" name="username" 
           minlength="3" maxlength="20" 
           pattern="[a-zA-Z0-9]+" 
           title="Nur Buchstaben und Zahlen" 
           required>
    
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Passwort (min. 8 Zeichen):</label>
    <input type="password" id="password" name="password" 
           minlength="8" required>
    
    <label>
        <input type="checkbox" name="privacy" required>
        Datenschutz akzeptieren
    </label>
    
    <button type="submit">Registrieren</button>
</form>

Bestellformular mit Zahlen

<form>
    <label for="quantity">Anzahl (1-10):</label>
    <input type="number" id="quantity" name="quantity" 
           min="1" max="10" value="1" required>
    
    <label for="price">Preis in Euro:</label>
    <input type="number" id="price" name="price" 
           min="0" step="0.01" placeholder="0.00">
    
    <label for="delivery">Lieferdatum:</label>
    <input type="date" id="delivery" name="delivery" 
           min="2024-01-01" required>
</form>

step="0.01" erlaubt Cent-Beträge!

Häufige Fehler & Troubleshooting

Fehler 1: Nur Leerzeichen akzeptiert

required prüft nicht auf Leerzeichen! Ein Feld mit nur Leerzeichen gilt als ausgefüllt. Lösung: pattern="\S.*" oder serverseitige Prüfung.

Fehler 2: Pattern deckt nicht alles ab

FALSCH: pattern="[0-9]"     → Nur EINE Ziffer
RICHTIG: pattern="[0-9]+"   → MINDESTENS eine Ziffer

Fehler 3: Validierung wird umgangen

HTML-Validierung kann im Browser deaktiviert werden. IMMER zusätzlich serverseitig prüfen!

HTML: Best Practices & Tipps

Benutzerfreundliche Fehlermeldungen

• title-Attribut für eigene Hinweise
• Positiv formulieren: "Bitte gib..." statt "Ungültige..."
• Format-Beispiele zeigen

CSS für Validierungszustände

<style>
input:valid { border: 2px solid green; }
input:invalid { border: 2px solid red; }
input:required { border-left: 4px solid blue; }
</style>

Übersicht: Validierungsattribute

• required – Pflichtfeld
• minlength / maxlength – Textlänge
• min / max – Zahlenbereiche
• pattern – Reguläre Ausdrücke
• type – email, url, number, date...

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die wichtigsten Validierungsattribute:

• required für Pflichtfelder
• pattern für eigene Formate
• min/max für Bereiche
• Input-Typen für automatische Prüfung

Damit validierst du Formulare direkt im Browser – ohne JavaScript!

Bereit für mehr? Lerne als Nächstes die HTML5 Semantischen Elemente für bessere Seitenstruktur!