Kurs · Modul 307
Interaktive Webseite mit Formular erstellen
Nach diesem Kurs baust du Webformulare von der Feldliste bis zur Verarbeitung auf dem Server selbständig: Du kürzt Kundenwünsche begründet auf das Nötige, setzt das Formular mit sauberem, barrierefreiem HTML um, validierst Eingaben im Browser mit HTML-Attributen, der Constraint Validation API und eigenen JavaScript-Funktionen und machst es mit bedingten Feldern, Live-Preis und Statusanzeigen angenehm bedienbar. Du sendest die Daten per POST oder fetch, prüfst sie in PHP vollständig neu, gibst Fehler mit erhaltenen Eingaben zurück und schützt das Formular gegen XSS, Header-Injection und Spam. Den Datenschutz nach DSG setzt du mit Datensparsamkeit, klarem Hinweis und Löschfristen um. In 14 Code-Laboren schreibst du die Prüffunktionen selbst, vom Schweizer Telefonformat bis zur IBAN-Prüfziffer, und mit Testprotokollen belegst du, dass dein Formular funktioniert.
Dein nächster Schritt
Formulare planen: vom Wunschzettel zur schlanken Feldliste
Du leitest aus einem Auftrag eine Feldliste mit Zweck, Typ und Pflicht ab, streichst Unnötiges begründet und planst Gruppen, Reihenfolge und Bestätigungsmeldung. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Formular planen | 0% | 0% | 0% |
| B · Semantisches HTML-Formular | – | – | – |
| C · Validierung im Browser | – | – | – |
| D · Interaktivität | – | – | – |
| E · Daten senden und auf dem Server prüfen | – | – | – |
| F · Sicherheit und Datenschutz | – | – | – |
Abzeichen
Lektionen
- 1Formulare planen: vom Wunschzettel zur schlanken FeldlisteDu leitest aus einem Auftrag eine Feldliste mit Zweck, Typ und Pflicht ab, streichst Unnötiges begründet und planst Gruppen, Reihenfolge und Bestätigungsmeldung.Gratis40 Min.
- 2Formulare in HTML: label, Typen, Gruppen und autocompleteDu baust ein Formular mit verknüpften Labels, passenden input-Typen, Radiobuttons, Auswahllisten, fieldset und legend sowie autocomplete auf.40 Min.
- 3Barrierefreie Formulare: Hinweise, Fehler und TestsDu verknüpfst Hinweise und Fehlermeldungen mit aria-describedby, kündigst Fehler für alle an und belegst die Bedienbarkeit mit einem Testprotokoll.40 Min.
- 4Validierung mit HTML-Attributen und regulären AusdrückenDu setzt required, min, max, maxlength, step und pattern gezielt ein, verstehst reguläre Ausdrücke für Schweizer Formate und schreibst erste Prüffunktionen.40 Min.
- 5Eigene Meldungen mit der Constraint Validation APIDu zeigst verständliche Fehlermeldungen direkt beim Feld, wählst den richtigen Prüfzeitpunkt und setzt Regeln über mehrere Felder und Prüfziffern um.45 Min.
- 6Interaktive Formulare: bedingte Felder, Live-Preis, SchritteDu blendest Felder bedarfsgerecht ein, berechnest Preise live, baust Zeichenzähler und mehrstufige Formulare, die auch ohne JavaScript funktionieren.45 Min.
- 7Daten senden: GET, POST, FormData und fetchDu verstehst, welche Felder wie gesendet werden, wählst zwischen GET und POST und sendest mit fetch inklusive Statusanzeige und Fehlerbehandlung.40 Min.
- 8Auf dem Server prüfen und verarbeiten mit PHPDu prüfst alle Daten in PHP erneut, gibst Fehler mit erhaltenen Eingaben zurück, löst eine Mail aus und belegst den Ablauf mit manipulierten Testdaten.45 Min.
- 9Sicherheit, Spam-Schutz und DatenschutzDu schützt Formulare gegen XSS, Header-Injection, CSRF und Spam und setzt Informationspflicht, Datensparsamkeit und Löschfristen nach DSG um.45 Min.