Formulare und APIs

Viele Webseiten werden erst durch Formulare und API-Kommunikation zu echten Anwendungen. Logins, Kontaktformulare, Warenkörbe, Suchfelder, Profileinstellungen und Dashboards bestehen aus Eingaben, Validierung, Requests und Antworten.

Formulare sauber aufbauen

Ein gutes Formular ist verständlich, bedienbar und technisch eindeutig.

Wichtige Bausteine:

<form action="/kontakt" method="post">
  <label for="email">E-Mail</label>
  <input id="email" name="email" type="email" required>

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

  <button type="submit">Nachricht senden</button>
</form>

Validierung

Validierung prüft, ob Eingaben vollständig, plausibel und erlaubt sind.

Clientseitige Validierung im Browser hilft Benutzern sofort. Serverseitige Validierung ist trotzdem Pflicht, weil Browser-Regeln umgangen werden können.

Typische Prüfungen:

• Pflichtfelder
• E-Mail-Format
• Mindest- und Maximallänge
• erlaubte Zeichen
• Wertebereiche
• Dateityp und Dateigröße
• doppelte Einträge
• Berechtigungen

HTTP-Methoden

APIs verwenden HTTP-Methoden, um die Absicht einer Anfrage zu beschreiben.

Statuscodes

Statuscodes zeigen, wie eine Anfrage ausgegangen ist.

JSON und Fetch

JSON ist ein häufiges Datenformat für APIs.

{
  "name": "Ada",
  "role": "Frontend Developer"
}

Mit fetch kann JavaScript API-Daten laden oder senden:

const response = await fetch('/api/contact', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: '[email protected]',
    message: 'Hallo',
  }),
})

if (!response.ok) {
  throw new Error('Die Nachricht konnte nicht gesendet werden.')
}

const result = await response.json()

Fehlerzustände sichtbar machen

Eine Webanwendung sollte nicht nur den Erfolgsfall gestalten.

Wichtige Zustände:

• leerer Zustand
• Ladezustand
• erfolgreicher Abschluss
• Validierungsfehler
• Netzwerkfehler
• Serverfehler
• keine Berechtigung
• abgelaufene Session

Gute Fehlermeldungen sagen, was passiert ist und was der Benutzer tun kann.

Schlecht:

Error

Besser:

Die E-Mail-Adresse ist ungültig. Prüfe bitte das Format, zum Beispiel [email protected].

Merksatz

Formulare und APIs sind Verträge zwischen Benutzeroberfläche, Browser und Backend. Gute Webentwicklung behandelt Eingaben, Fehler und Randfälle genauso sorgfältig wie den Erfolgsfall.