Ein Formular, das Fehler abfängt

Ein Besucher hinterlässt dir eine Nachricht, und das Formular weist höflich darauf hin, wenn etwas fehlt.

Zeig mir das: ein Formular in HTML

Ein Formular ist eine Sammlung von Feldern, in die der Besucher tippt:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

<form> umschließt das ganze Formular. <input> ist ein einzeiliges Feld, <textarea> ein mehrzeiliges.
<label> ist die Beschriftung eines Feldes – dank for und id gehören sie zusammen (ein Klick auf das Label springt zum Feld).
placeholder ist grauer Hinweistext.
Ein Button mit type="submit" sendet das Formular ab.

Und etwas CSS, damit es schön aussieht:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column dreht Flexbox von seitlich auf aufrecht: Die Kinder stehen untereinander.

Zeig mir das: Prüfung in JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Neue Sachen:

submit – das Ereignis „das Formular wird abgeschickt.” Wir hören darauf am Formular, nicht am Button.
event.preventDefault() – „tu nicht, was du normalerweise tun würdest.” Ohne das würde die Seite neu laden und unser Skript käme nicht zum Zug.
.value – was im Feld getippt wurde. .trim() schneidet Leerzeichen ab (damit zählt „ ” als leer!).
return – verlasse die Funktion sofort (kein Sinn, weitere Prüfungen laufen zu lassen).

💡

Wohin geht die Nachricht? Noch nirgendwohin – wir haben keinen Server, der sie empfängt. Wir prüfen die Nachricht nur und sagen Danke. Aber merk dir diese Stelle: In Level 3 bauen wir einen echten Server mit einem Gästebuch und verbinden dieses Formular damit. Dann werden Nachrichten wirklich gespeichert!

Jetzt du 💪

Füge deiner Website ein Formular hinzu, das zu deinem Projekt passt, mit Eingabeprüfung:

🏫 Eine Nachricht für die Schule – Name + Nachricht (genau wie im Beispiel).
🙋 Schreib mir – Name + Nachricht, füg ruhig ein Feld „dein Lieblingsspiel” hinzu.
🌍 Reisevorschlag – Name + „wohin sollen wir als Nächstes und warum.”
⚽ Trainings-Anmeldung – Name + Alter (<input type="number">) + prüfe, dass das Alter ausgefüllt ist und mindestens 6: if (age.value < 6) { ... }.

⚠️

Eine Sicherheits-Gewohnheit der Profis: Vertrau nie dem, was ein Nutzer tippt. Prüf es immer – ein leeres Feld, ein unsinniges Alter, Text, der zu lang ist. Heute machst du das aus Höflichkeit; in echten Anwendungen ist es die erste Verteidigungslinie gegen Angreifer.

✅

Kontrolliere dich selbst: Ein leeres Formular markiert das Feld rot und zeigt eine Nachricht. Ein ausgefülltes Formular bedankt sich beim Namen und leert sich. Höflich, freundlich, professionell.

Das nimmst du aus dieser Lektion mit

Ein Formular: <form>, <input>, <textarea>, <label> und das submit-Ereignis mit preventDefault().
.value.trim() = was der Nutzer getippt hat, ohne die Leerzeichen drumherum.
Nutzereingaben sollten immer geprüft werden – das ist die Grundlage sicheren Programmierens.