Interaktive Webseite mit Formular erstellen

Formulare sind die Stelle, an der aus Besuchenden Kundinnen, Anmeldungen oder Anfragen werden. In diesem Modul planst du ein Formular aus einem konkreten Auftrag, baust es semantisch und barrierefrei mit HTML auf und validierst Eingaben im Browser mit HTML-Attributen und JavaScript. Du machst das Formular interaktiv, z.B. mit bedingten Feldern oder einer Live-Preisberechnung, und sendest die Daten an ein Serverskript, das sie erneut prüft. Dabei denkst du an Sicherheit, Spam und revDSG.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Ein Formular aus einem Auftrag ableiten und schlank planen

   Kompetenz A

   Du klärst, welche Daten wirklich gebraucht werden und wofür. Jedes Feld muss einen Zweck haben. Du legst Feldtypen, Pflichtfelder, Reihenfolge und die Meldung nach dem Absenden fest.

   Situation

   Eine Druckerei in St. Gallen will ein Formular für Offertanfragen. Der Verkaufsleiter wünscht 18 Felder, inklusive Geburtsdatum und Telefon privat und geschäftlich.

   Deine Aufgabe

   Plane ein schlankes Formular, das trotzdem alle nötigen Angaben liefert.

   Gutes Ergebnis

   Neun Felder: Produktart (Auswahl), Format, Auflage, Papier, Liefertermin, Datei-Upload optional, Name, E-Mail, Telefon optional. Geburtsdatum entfällt, weil es für eine Offerte keinen Zweck hat. Nach dem Absenden erscheint 'Danke, wir melden uns innert 24 Stunden.'

   DatensparsamkeitPflicht- vs. optionale FelderFeldreihenfolgeBestätigungsmeldungZweckbindung (revDSG)
2. 2

   Formulare semantisch und barrierefrei in HTML aufbauen

   Kompetenz B

   Jedes Feld hat ein sichtbares label, das mit for und id verknüpft ist. Du nutzt passende input-Typen, gruppierst zusammengehörige Felder mit fieldset und legend und setzt autocomplete, damit Browser beim Ausfüllen helfen.

   Situation

   Ein Sportverein in Schaffhausen hat ein Anmeldeformular, in dem Feldnamen nur als Platzhalter im Feld stehen. Auf dem Handy erscheint bei Telefon die Buchstabentastatur.

   Deine Aufgabe

   Baue das Formular korrekt auf.

   Gutes Ergebnis

   Sichtbare labels über jedem Feld, type='email', type='tel' und type='date', autocomplete='given-name', 'family-name', 'email'. Die Auswahl der Trainingsgruppe als Radio-Buttons in einem fieldset mit legend 'Trainingsgruppe'. Auf dem Handy erscheint jetzt die passende Tastatur.

   label for / idinput-Typenfieldset / legendautocompleteselect / radio / checkboxname-Attribut
3. 3

   Eingaben im Browser mit HTML-Attributen und JavaScript validieren

   Kompetenz C

   Du nutzt eingebaute Validierung mit required, min, max, pattern und type und ergänzt eigene Regeln mit JavaScript. Fehlermeldungen sind konkret, stehen direkt beim Feld und sind auch für Screenreader verbunden.

   Situation

   Beim Anmeldeformular für einen Schnuppertag geben viele Jugendliche eine falsche PLZ ein oder lassen das Lehrjahr leer. Die Fehlermeldung lautet nur 'Fehler im Formular'.

   Deine Aufgabe

   Verbessere die Validierung und die Fehlermeldungen.

   Gutes Ergebnis

   PLZ mit pattern='[0-9]{4}' und Meldung 'Bitte gib eine vierstellige Schweizer PLZ ein, z.B. 8400.' Prüfung beim Verlassen des Feldes (blur) statt bei jedem Tastendruck. Die Meldung steht unter dem Feld, ist mit aria-describedby verknüpft, das Feld bekommt aria-invalid='true'. Beim Absenden springt der Fokus zum ersten Fehler.

   required / pattern / min / maxConstraint Validation APIsetCustomValidityaria-describedby / aria-invalidInline-Fehlermeldung
4. 4

   Das Formular mit JavaScript interaktiv und benutzerfreundlich machen

   Kompetenz D

   Du blendest Felder nur ein, wenn sie gebraucht werden, berechnest Preise live, zeigst Zeichenzähler oder teilst lange Formulare in Schritte. Die Interaktion hilft beim Ausfüllen, statt abzulenken.

   Situation

   Bei der Offertanfrage der Druckerei sind die Felder 'Rillung' und 'Falzart' nur bei Faltflyern relevant. Ausserdem möchten Kunden sofort einen Richtpreis sehen.

   Deine Aufgabe

   Mach das Formular interaktiv.

   Gutes Ergebnis

   Bei Produktart 'Faltflyer' werden die zusätzlichen Felder eingeblendet (hidden entfernt), sonst bleiben sie verborgen und deaktiviert (hidden und disabled am umschliessenden fieldset), damit sie weder mitgesendet noch validiert werden. Ein Richtpreis in CHF wird bei jeder Änderung neu berechnet und in einem Bereich mit aria-live angezeigt.

   bedingte Felderchange- / input-Eventhidden-Attributaria-liveMehrschritt-Formular
5. 5

   Formulardaten an den Server senden und dort erneut prüfen

   Kompetenz E

   Du verstehst den Unterschied zwischen GET und POST, sendest Daten per POST an ein Serverskript und prüfst sie dort nochmals, weil Browserprüfungen umgangen werden können. Danach wird eine Bestätigung angezeigt und optional eine E-Mail verschickt.

   Situation

   Ein Jugendchor in Zug nimmt Anmeldungen für sein Sommerlager entgegen. Bisher landet nichts beim Leiter, weil das Formular keine action hat.

   Deine Aufgabe

   Verarbeite die Formulardaten mit einem einfachen PHP-Skript.

   Gutes Ergebnis

   form method='post' action='anmeldung.php'. Das Skript prüft Pflichtfelder und E-Mail mit filter_var, gibt Werte nur mit htmlspecialchars aus, sendet eine Mail an den Lagerleiter und zeigt eine Bestätigungsseite. Bei Fehlern kommt das Formular mit den bereits eingegebenen Werten zurück.

   GET vs. POSTaction / methodserverseitige Validierung$_POSTBestätigungsseiteFormular-Dienst (Formspree)
6. 6

   Sicherheit, Spam-Schutz und Datenschutz bei Formularen berücksichtigen

   Kompetenz F

   Du übermittelst Formulare nur über HTTPS, behandelst alle Eingaben als nicht vertrauenswürdig und schützt das Formular vor Bots. Besuchende erfahren beim Formular, wofür ihre Daten verwendet werden.

   Situation

   Das Kontaktformular eines Hotels bekommt täglich 200 Spam-Nachrichten, und eine Nachricht enthielt ein Script, das im Admin-Mail ausgeführt wurde.

   Deine Aufgabe

   Sichere das Formular ab.

   Gutes Ergebnis

   Honeypot-Feld, das für Menschen unsichtbar ist und bei Ausfüllen die Nachricht verwirft, plus Zeitprüfung (Absenden unter 3 Sekunden wird verworfen). Alle Ausgaben mit htmlspecialchars. HTTPS erzwungen. Kurzer Hinweis unter dem Formular mit Link zur Datenschutzerklärung. Spam sinkt auf unter 5 pro Tag.

   HTTPSXSSHoneypotCAPTCHA (Alternativen)Datenschutzhinweis (revDSG)

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Alina ist im 2. Lehrjahr als Mediamatikerin bei der Pixelhof GmbH in Luzern, einer Webagentur mit 16 Mitarbeitenden. Eine Kletterhalle in Kriens nimmt Anmeldungen für Kinderkurse bisher per Telefon und E-Mail entgegen, was pro Woche mehrere Stunden kostet. Alina soll ein Anmeldeformular für die Website bauen, von der Planung bis zur Verarbeitung auf dem Server.

1. Kapitel 1

   23 Felder sind zu viel

   Die Kursleiterin schickt eine Liste mit 23 Feldern, darunter Schuhgrösse, Beruf der Eltern und Hobbys des Kindes. Alina fragt bei jedem Feld nach, wofür es gebraucht wird, und streicht 11 davon. Die Schuhgrösse bleibt als freiwilliges Feld, weil die Halle Mietschuhe bereitlegt. Den Entwurf gruppiert sie in die Blöcke Kind, Erziehungsberechtigte und Kurs.

   Ziel 1

2. Kapitel 2

   Ein Formular für alle

   Alina baut das Formular in HTML mit einem label für jedes Feld, fieldset für die drei Blöcke und type='tel' sowie type='email' für die Kontaktdaten. Für den Kurs nutzt sie Radiobuttons, weil nur fünf Kurse zur Auswahl stehen. Beim Test mit der Tabulatortaste merkt sie, dass ein selbstgebautes Dropdown für das Alter gar nicht erreichbar ist, und ersetzt es durch ein normales select.

   Ziel 2

3. Kapitel 3

   Hilfreiche Fehlermeldungen

   Mit required, dem select für das Alter, min und max für die Schuhgrösse fängt Alina die häufigsten Fehler ab, für die PLZ nutzt sie ein pattern mit vier Ziffern. Die Standardmeldungen des Browsers sind uneinheitlich, deshalb zeigt sie mit der Constraint Validation API eigene Texte direkt unter dem Feld an. Wählt jemand den Ferienkurs, blendet JavaScript zusätzlich die Wahl der Ferienwoche ein, und ein Preisfeld zeigt laufend den Betrag für ein oder zwei Kinder.

   Ziel 3Ziel 4

4. Kapitel 4

   Was der Server noch einmal prüft

   Das Formular sendet per POST an ein PHP-Skript auf dem Hosting. Alina prüft dort alle Felder erneut, weil sie im Test die Browserprüfung mit den DevTools einfach ausschalten konnte. Bei Fehlern erscheint das Formular wieder mit den bisherigen Eingaben, sonst geht eine Mail an die Kursleitung, und die Eltern sehen eine Bestätigungsseite mit allen Angaben.

   Ziel 5

5. Kapitel 5

   Spam am ersten Wochenende

   Nach dem Livegang kommen am ersten Wochenende 140 Spam-Anmeldungen. Alina ergänzt ein verstecktes Honeypot-Feld und eine Mindestzeit fürs Ausfüllen, worauf der Spam fast vollständig verschwindet. Zusätzlich sichert sie alle Ausgaben in der Mail mit htmlspecialchars ab, verlinkt die Datenschutzerklärung beim Absenden-Button und sorgt dafür, dass die Anmeldungen drei Monate nach Kursende gelöscht werden.

   Ziel 6

1. 1

   Formulare planen

   ca. 2 Std.

   Du lernst, aus einem Auftrag ein schlankes Formular abzuleiten, bevor du es baust.

   • Drei Formulare von Schweizer Websites (Bahn, Gemeinde, Onlineshop) analysieren: Was hilft, was nervt?
   • Für einen Auftrag eine Feldliste mit Zweck, Typ und Pflicht/optional erstellen
   • Ein Wireframe des Formulars für Mobile skizzieren

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   HTML-Formular sauber aufbauen

   ca. 4 Std.

   Du baust das Formular mit den richtigen Elementen und gestaltest es mit CSS.

   • Alle Felder mit label, passendem type und autocomplete anlegen
   • Gruppen mit fieldset und legend bilden
   • Formular mit CSS gestalten, inklusive Fokus- und Fehlerzustand, und auf dem Handy testen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Validierung im Browser

   ca. 5 Std.

   Du sorgst dafür, dass Fehler früh, freundlich und verständlich gemeldet werden.

   • Eingebaute Validierung mit required, pattern, min und max nutzen
   • Eigene Meldungen mit JavaScript und der Constraint Validation API ergänzen
   • Fehlermeldungen mit aria-describedby verbinden und mit Screenreader testen

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   Interaktivität ergänzen

   ca. 4 Std.

   Du machst das Formular smarter, ohne es komplizierter zu machen.

   • Bedingte Felder ein- und ausblenden
   • Einen Live-Preis oder Zeichenzähler umsetzen
   • Ein langes Formular in drei Schritte mit Fortschrittsanzeige aufteilen

   Trainiert Kompetenz D1D2

   Lernziel4

5. 5

   Senden, prüfen, absichern

   ca. 5 Std.

   Du verarbeitest die Daten auf dem Server und schützt das Formular.

   • Ein PHP-Skript in XAMPP schreiben, das Daten prüft und eine Bestätigung zeigt
   • Honeypot und Zeitprüfung gegen Spam einbauen
   • Datenschutzhinweis formulieren und Testfälle (leer, falsch, Grenzwerte, Script-Eingabe) durchspielen

   Trainiert Kompetenz E1E2F1F2

   Lernziel56

6. 6

   Abschlussprojekt

   ca. 4 Std.

   Du baust ein vollständiges Formular von der Planung bis zum getesteten, veröffentlichten Ergebnis.

   • Auftrag analysieren, Formular bauen, validieren, absichern
   • Testprotokoll mit mindestens zehn Testfällen erstellen
   • Ergebnis in 5 Minuten präsentieren

   Trainiert Kompetenz A3B3C3E3

   Lernziel1235

label

HTML-Element, das die Beschriftung eines Formularfeldes enthält und über for/id damit verknüpft ist.

Validierung

Prüfung, ob eingegebene Daten vollständig sind und dem erwarteten Format entsprechen.

Constraint Validation API

Browser-Schnittstelle, mit der JavaScript die eingebaute Formularvalidierung abfragen und eigene Meldungen setzen kann.

POST

HTTP-Methode, mit der Formulardaten im Rumpf der Anfrage an den Server gesendet werden.

Serverseitige Validierung

Prüfung der Daten auf dem Server, die nicht umgangen werden kann.

XSS

Cross-Site-Scripting: Angriff, bei dem eingeschleuster Code in einer Seite ausgeführt wird, weil Eingaben ungefiltert ausgegeben werden.

Honeypot

Verstecktes Formularfeld, das Bots in die Falle lockt und so Spam erkennt.

Datensparsamkeit

Grundsatz, nur so viele Personendaten zu erheben, wie für den Zweck nötig sind.

Passende Module