alex-mueller/it-praxisportal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
it-praxisportal/courses/html_css/03_formulare_und_validierung
History
Alex Mueller 2571cb8847 feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel)
- Kurswechsler Dropdown mit Direktnavigation
- Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage
- Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets
- Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor
- Saubere Bereinigung redundanter statischer Legacy-Sidebars
2026-09-12 13:49:46 +02:00
..
aufgabe.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
index.html feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 2026-09-12 13:49:46 +02:00
musterloesung.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
README.md Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00
test_aufgabe.js Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00

README.md

HTML 03: Formulare & HTML5-Validierung 📋

Willkommen in Modul 03!

In dieser Einheit baust du interaktive Eingabeformulare, verknüpfst barrierefreie Labels und nutzt native HTML5-Validierungsregeln.

💡 1. Das Wichtigste in Kürze

Formular & Labels

  • Jedes Eingabefeld benötigt ein id-Attribut und ein passendes <label for="...">.
  • <fieldset> gruppiert logisch zusammenhängende Felder, <legend> liefert den Titel.

Input-Typen

  • <input type="text">: Einzeiliger Text.
  • <input type="email">: E-Mail-Validierung.
  • <input type="password">: Versteckte Passworteingabe.
  • <input type="number">: Numerische Eingabe mit min, max, step.
  • <select> & <option>: Dropdown-Auswahl.
  • <textarea>: Mehrzeiliger Fließtext.

Validierung ohne JavaScript

  • required: Feld darf nicht leer sein.
  • minlength / maxlength: Minimale / maximale Textlänge.
  • min / max: Zahlen- und Datumslimits.
  • pattern: Regex-Prüfung direkt im Browser.

🎯 Teilziele in aufgabe.html

  1. Form-Container: Erstelle <form action="/submit" method="POST"> mit <fieldset> und <legend>.
  2. Text & E-Mail: Lege Input-Felder für Name und E-Mail mit verknüpften <label for="..."> und required an.
  3. Passwort & Zahl: Füge ein Passwort-Feld (minlength="8") und ein Number-Feld (min="1", max="50") hinzu.
  4. Auswahl & Textarea: Integriere <select> mit <option>-Einträgen und eine <textarea>.
  5. AGB & Submit: Füge eine AGB-Checkbox (required) und <button type="submit"> ein.