JavaScript: Formulare und Eingaben

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

Teil des Kurses JavaScript

Kapitel 30 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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

Werte auslesen

form1.html

<form id="f">
  <label>Name <input name="name" value="Mia"></label><br>
  <label>Alter <input name="alter" type="number" value="17"></label><br>
  <label><input name="newsletter" type="checkbox" checked> Newsletter</label><br>
  <label>Farbe
    <select name="farbe"><option>rot</option><option selected>blau</option></select>
  </label><br>
  <button>Senden</button>
</form>
<pre id="ausgabe"></pre>
<script>
  document.getElementById("f").addEventListener("submit", (e) => {
    e.preventDefault();
    const daten = new FormData(e.target);
    const objekt = Object.fromEntries(daten);
    objekt.newsletter = e.target.newsletter.checked;
    objekt.alter = Number(objekt.alter);
    document.getElementById("ausgabe").textContent = JSON.stringify(objekt, null, 2);
  });
</script>

Feld	Wert lesen
Text, Zahl, Datum	feld.value (immer Text; feld.valueAsNumber für Zahlen)
Checkbox	feld.checked
Radio-Gruppe	form.elements.gruppe.value
Select	feld.value
Mehrfachauswahl	[...select.selectedOptions]
Datei	feld.files[0]

Live-Eingabe

form2.html

<input id="text" placeholder="Schreibe etwas" maxlength="40">
<p>Zeichen: <b id="zahl">0</b> / 40</p>
<p id="vorschau"></p>
<script>
  const text = document.getElementById("text");
  text.addEventListener("input", () => {
    document.getElementById("zahl").textContent = text.value.length;
    document.getElementById("vorschau").textContent = text.value.toUpperCase();
  });
</script>

Validierung

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

form3.html

<form id="f" novalidate>
  <label>E-Mail <input id="mail" type="email" required></label>
  <label>Passwort <input id="pw" type="password" minlength="8" required></label>
  <button>Registrieren</button>
</form>
<p id="status" role="status"></p>
<script>
  const f = document.getElementById("f");
  const status = document.getElementById("status");
  f.addEventListener("submit", (e) => {
    e.preventDefault();
    if (!f.checkValidity()) {
      const fehler = [...f.elements].filter(el => el.validity && !el.validity.valid)
                                    .map(el => `${el.id}: ${el.validationMessage}`);
      status.textContent = fehler.join(" | ");
      return;
    }
    status.textContent = "Alles gültig!";
  });
</script>

• 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)

Achtung

Prüfungen im Browser sind nur Komfort. Nutzer können sie umgehen. Der Server muss alle Eingaben immer noch einmal prüfen.

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

form4.html

<input id="datei" type="file" accept="text/plain,.txt">
<pre id="inhalt"></pre>
<script>
  document.getElementById("datei").addEventListener("change", async (e) => {
    const datei = e.target.files[0];
    if (!datei) return;
    const text = await datei.text();
    document.getElementById("inhalt").textContent =
      `${datei.name} (${datei.size} Bytes)\n\n${text.slice(0, 200)}`;
  });
</script>

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;
});

Merke

• FormData und Object.fromEntries holen alle Werte auf einmal
• value ist immer Text, bei Zahlen mit Number() umwandeln
• required, pattern und checkValidity() prüfen im Browser
• Der Server muss trotzdem prüfen
• Labels, passende Typen und Textmeldungen halten Formulare zugänglich

Übungsaufgabe

Baue ein Registrierungsformular mit Name, E-Mail und Passwort. Zeige bei ungültigen Feldern eine verständliche Meldung unter dem Feld.

Quiz zur Selbstkontrolle

Welchen Datentyp hat input.value?

• Immer String (richtig)
• Je nach Feld Zahl oder String
• Zahl
• Boolean

Warum muss der Server trotz Browser-Validierung prüfen?

• Nutzer können die Prüfung im Browser umgehen (richtig)
• Browser prüfen nie
• Es ist schneller
• Es ist nur Konvention

Was verhindert das Neuladen der Seite beim Absenden?

• event.preventDefault() im submit-Listener (richtig)
• return false im click
• form.stop()
• event.stopPropagation()

Weiter im Kurs

Zurück: Ereignisse (Events)

Weiter: Daten im Browser speichern

Alle Kapitel: JavaScript im Überblick