Ein barrierefreies Anmeldeformular erstellen ist ein Frontend-Praxisprojekt für Lernende mit Grundkenntnissen in HTML-Formularen, CSS und JavaScript. Du erstellst eine Anmeldeseite für ein kleines Handwerksstudio, auf der Besucher einen Workshoptermin auswählen, das Formular mit der Tastatur ausfüllen und eine Bestätigung von einem echten Server erhalten können.
Die Guided Labs beginnen mit der Tastaturbedienung eines funktionierenden Beispiels. Anschließend entwickelst du Layout, Rückmeldungen und asynchrones Absenden des Formulars. Eine eigenständige Challenge überträgt dieselben Techniken auf andere Termine und Beziehungen zwischen Eingabefeldern. Jedes Lab startet mit eigenen vorbereiteten Dateien und Daten.
Was du lernen wirst
Nach Abschluss des Kurses kannst du:
- sichtbare Beschriftungen, Hinweise, Eingabevorgaben und Fehlermeldungen so verknüpfen, dass Besucher wissen, was sie eingeben und wie sie Fehler korrigieren können;
- ein responsives Formular mit klarer Lesereihenfolge, sichtbarem Tastaturfokus und Rückmeldungen erstellen, die sich nicht allein auf Farben stützen;
- Daten mit
fetchundasync/awaitsenden, eine noch ausstehende Antwort anzeigen und wiederholte Absendeaktionen während des Wartens vermeiden; - eine vom Server vergebene Bestätigungs-ID erst nach Annahme einer Anmeldung anzeigen und zwischen abgelehnten Feldwerten, einem ausgebuchten Termin und einem vorübergehenden Dienstausfall unterscheiden;
- eingegebene Daten nach Ablehnung oder Fehler erhalten, nach dem geübten vorübergehenden Ausfall fortfahren und bestehende Anmeldungen bewahren.
Für wen dieser Kurs geeignet ist
Der Kurs richtet sich an Lernende, die einzelne Webübungen zu einem vollständigen Anmeldeablauf für Workshops verbinden möchten.
Voraussetzungen: Grundkenntnisse in HTML-Formularen und CSS-Layouts sowie JavaScript-Objekte, Funktionen und Ereignisse. Du solltest außerdem wissen, wie du DOM-Elemente auf einfache Weise auswählst. Du kannst Projektdateien öffnen und speichern. Die Guided Labs erklären vor der Challenge die benötigte Formularsemantik, Validierung, asynchronen Code, HTTP-Antworten und Zustandsverwaltung. React wird nicht vorausgesetzt.
Lernumgebung: LabEx stellt eine vorbereitete Programmierumgebung im Browser, eine Webseitenvorschau sowie eine funktionsfähige lokale API und Datenbank bereit. Die Übungsidentitäten und Kontaktdaten sind künstlich erzeugt. Du bearbeitest das Frontend; Beschriftungen der Website und Laufzeitausgaben bleiben auf Englisch.
Häufig gestellte Fragen
Schreibe ich Code?
Ja. Du vervollständigst HTML, CSS und JavaScript in einem vorbereiteten Projekt und nutzt das Formular anschließend durch echte Browseraktionen: Tastatureingabe, Absenden, Ablehnung und Wiederaufnahme nach einem Fehler.
Erstelle ich das Backend oder seine Sicherheitskontrollen?
Nein. API und Datenbank sind vorbereitet. Du sorgst dafür, dass das Frontend die tatsächlich vom Server angenommenen Anmeldungen widerspiegelt. Browservalidierung und ein deaktivierter Absende-Button implementieren keine Backend-Sicherheit und garantieren keinen sicheren Umgang mit gleichzeitigen Zugriffen im Produktivbetrieb.
Bescheinigt der Kurs die Barrierefreiheit?
Nein. Du übst bestimmte Verhaltensweisen für Beschriftungen, Tastatur, Fokus und Rückmeldungen. Eine vollständige Prüfung der Barrierefreiheit umfasst mehr als diese Übungen.
