05 – Formulare & Datenbank 💾

Vom HTML-Formular zur sicheren Datenspeicherung

🎯 1. Warum Formulare wichtig sind

Formulare sind die einzige Möglichkeit, wie Besucher Daten an deinen Server senden können:

Kontaktanfragen
Login-Daten
Bestellungen
Umfragen

Ohne korrektes HTML-Formular kommt nichts beim Backend an!

📝 2. Ein einfaches HTML-Formular

Jedes Formular braucht drei Dinge:

Das <form>-Tag mit action und method
Eingabefelder mit name-Attribut
Einen Absende-Button

<form action="verarbeiten.php" method="POST">
  <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>

  <label for="nachricht">Nachricht:</label>
  <textarea id="nachricht" name="nachricht" required></textarea>

  <button type="submit">Senden</button>
</form>

💡 Merke: Das name-Attribut ist entscheidend! Nur Felder mit name werden gesendet – id dient nur der Verknüpfung mit <label>.

🔍 3. Clientseitige Prüfung (im Browser)

HTML5 bietet eingebaute Prüfungen – aber: Sie sind nicht sicher!

Attribut	Wirkung	Beispiel
`required`	Feld muss ausgefüllt sein	`<input required>`
`type="email"`	Prüft auf gültige E-Mail	`<input type="email">`
`minlength`	Mindestlänge festlegen	`<input minlength="3">`
`pattern`	RegEx-Muster (z. B. nur Zahlen)	`<input pattern="[0-9]{4}">`

⚠️ Achtung: Diese Prüfungen können leicht umgangen werden! Die wirkliche Sicherheit passiert erst im Backend.

✅ 4. Formularprüfung mit JavaScript

Mit JavaScript kannst du komplexere Validierungen durchführen – z. B.:

Prüfen, ob zwei Passwörter übereinstimmen
Überprüfen, ob ein Name mindestens zwei Wörter enthält
Eine benutzerfreundliche Fehlermeldung anzeigen (ohne nerviges alert())

Beispiel: Ein Registrierungsformular mit Name und Passwort.

<form id="registrierung">
  <label for="name">Name (mind. 2 Zeichen):</label>
  <input type="text" id="name" name="name" required>

  <label for="passwort">Passwort:</label>
  <input type="password" id="passwort" name="passwort" required>

  <label for="passwort2">Passwort wiederholen:</label>
  <input type="password" id="passwort2" name="passwort2" required>

  <div id="fehler" style="color: red; margin: 10px 0;"></div>

  <button type="submit">Registrieren</button>
</form>

<script>
document.getElementById('registrierung').addEventListener('submit', function(e) {
  const name = document.getElementById('name').value;
  const pass1 = document.getElementById('passwort').value;
  const pass2 = document.getElementById('passwort2').value;
  const fehlerDiv = document.getElementById('fehler');
  fehlerDiv.textContent = ''; // Fehler zurücksetzen

  let fehler = false;

  if (name.length < 2) {
    fehlerDiv.textContent += '• Der Name muss mindestens 2 Zeichen lang sein.\n';
    fehler = true;
  }

  if (pass1 !== pass2) {
    fehlerDiv.textContent += '• Die Passwörter stimmen nicht überein.\n';
    fehler = true;
  }

  if (fehler) {
    e.preventDefault(); // Absenden verhindern
  }
});
</script>

💡 Merke: Auch JavaScript-Prüfungen sind nicht sicher – sie können deaktiviert oder umgangen werden. Die endgültige Prüfung passiert immer im Backend.

🔄 5. Der Request – was wird gesendet?

Wenn du das Formular abschickst, sendet der Browser eine POST-Anfrage an die URL in action.

Gesendet werden nur die Werte der Felder mit name:

name=Max+Mustermann&passwort=geheim123&passwort2=geheim123

Dein Backend (PHP oder Node.js) empfängt diese Daten und kann sie verarbeiten – aber nur dort kannst du sicher sein, dass sie nicht manipuliert wurden.

🛡️ 6. Warum Backend-Prüfung unverzichtbar ist

Ein Angreifer kann:

Die HTML-Seite ändern und required entfernen
Mit Tools wie Postman beliebige Daten senden
SQL-Befehle in das Formular eingeben (SQL-Injection)

Deshalb musst du immer im Backend prüfen:

Ist die E-Mail wirklich eine E-Mail?
Enthält der Text gefährliche Zeichen?
Ist der Name nicht leer?

💡 Regel: Vertraue niemals den Daten aus dem Browser – prüfe und bereinige sie immer im Backend.

🧠 7. KI-Prompt-Training

Aufgabe: Zeichne zuerst auf Papier ein Registrierungsformular mit:

Name (Pflicht, min. 2 Zeichen)
E-Mail (Pflicht, gültiges Format)
Passwort (Pflicht, min. 6 Zeichen)
Passwort-Wiederholung

Danach formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um das HTML-Formular mit JavaScript-Validierung zu erstellen – aber nicht den gesamten Code zu kopieren.

➡️ 8. Nächste Schritte

In den folgenden Kapiteln lernst du:

Wie du die Formulardaten in PHP sicher empfängst
Wie du sie in Node.js mit Express verarbeitest
Wie du sie sicher in der Datenbank speicherst

Aber zuerst: Wie unterscheiden sich beide Technologien?