Formulare und Eingaben

Formulare sind der wichtigste Weg, Eingaben von Menschen zu bekommen. JavaScript liest die Werte, prüft sie und reagiert darauf.

Werte auslesen

Live-Eingabe

Validierung

HTML bringt Prüfungen mit: required, minlength, maxlength, min, max, pattern, type="email". JavaScript greift über die Constraint Validation API darauf zu:

• checkValidity() prüft das Formular, reportValidity() zeigt zusätzlich Meldungen
• input.validity.valueMissing, typeMismatch, tooShort, patternMismatch sagen, was falsch ist
• input.setCustomValidity("Text") setzt eine eigene Meldung (leerer Text = gültig)

Zugänglich bleiben

• Jedes Feld braucht ein <label> (Klick auf den Text fokussiert das Feld, Screenreader lesen ihn vor)
• Fehlermeldungen als Text anzeigen, nicht nur über Farbe, und mit role="alert" oder aria-live ankündigen
• Passenden type wählen (email, tel, number, date): Handys zeigen dann die richtige Tastatur

Dateien

Formular per fetch absenden

f.addEventListener("submit", async (e) => {
  e.preventDefault();
  const antwort = await fetch("/api/kontakt", {
    method: "POST",
    body: new FormData(f),            // bei Dateien: multipart/form-data
  });
  status.textContent = antwort.ok ? "Gesendet" : "Fehler " + antwort.status;
});