JavaScript

Formulare

Formulardaten mit JavaScript lesen, validieren und ohne Neuladen absenden — der Standard-Workflow moderner Web-Apps.

submit abfangen

Das submit-Event feuert am form-Element. preventDefault() verhindert das Neuladen der Seite.

So übernimmt JavaScript den Versand, etwa per fetch an eine API.

Formular-Handling

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const daten = new FormData(form);
  await fetch('/api/kontakt', {
    method: 'POST',
    body: daten
  });
});

Werte lesen

FormData sammelt alle Feldwerte anhand der name-Attribute.

Einzelne Felder liest man auch direkt über input.value oder checkbox.checked.

FormData

const daten = new FormData(form);
daten.get('email');
Object.fromEntries(daten); // als Objekt

Validierung

HTML liefert die erste Stufe: required, minlength, type="email".

JavaScript ergänzt eigene Regeln und zeigt verständliche Fehlermeldungen. Serverseitige Validierung bleibt trotzdem Pflicht.

Fortschritt

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.