Formulare
Formulare sind die Schnittstelle für Eingaben: Login, Suche, Kontakt, Einstellungen und viele andere Workflows.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Basis
form gruppiert Felder, die gemeinsam abgeschickt werden.
label verbindet Beschriftung und Eingabefeld. Das ist wichtig für Bedienbarkeit und Barrierefreiheit.
button kann ein Formular absenden oder als normaler Aktionsbutton dienen.
<form action="/login" method="post">
<label for="email">E-Mail</label>
<input id="email" name="email" type="email">
<button type="submit">Anmelden</button>
</form>Eingabetypen
Das type-Attribut entscheidet, welches Eingabeverhalten der Browser anbietet.
email, password, checkbox, radio, date und number bringen Validierung oder passende Tastaturen mit.
<label for="mail">E-Mail</label>
<input id="mail" type="email" autocomplete="email">
<label for="datum">Datum</label>
<input id="datum" type="date">
<label><input type="checkbox"> Newsletter abonnieren</label>Mehr Struktur
textarea ist für mehrzeilige Texte.
select und option bilden Dropdowns. fieldset und legend gruppieren zusammengehörende Felder.
Vertiefung
Formulare sind eine Schnittstelle
Ein Formular ist erst dann gut, wenn es auch mit Tastatur, Screenreader und Autofill funktioniert. Jedes Feld braucht eine sichtbare Beschriftung, die per for mit der id verbunden ist.
Der passende type liefert mobile Tastaturen und Grundvalidierung. required, minlength und autocomplete sind Hinweise an den Browser, ersetzen aber keine serverseitige Prüfung.
<form action="/login" method="post">
<label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="passwort">Passwort</label>
<input id="passwort" name="passwort" type="password" autocomplete="current-password" minlength="8" required>
<button type="submit">Anmelden</button>
</form>Merksatz: Beschriftung, passender Eingabetyp und sinnvolle Attribute machen Formulare bedienbar und robust.
Übungsaufgabe
Barrierefreies Anmeldeformular
Baue ein Registrierungsformular mit E-Mail, Passwort, Passwortwiederholung und einer Checkbox für die AGB. Gruppiere die Passwortfelder sinnvoll.
Das soll dein Programm können
- label mit for und passende id
- type="email" und type="password"
- required und minlength
- fieldset mit legend für die Passwortfelder
- Checkbox mit eigener Beschriftung und submit-Button
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die Checkbox braucht eine id, damit das Label per for darauf zeigt. autocomplete="new-password" hilft Passwortmanagern.
Lösung anzeigen
<form action="/registrieren" method="post">
<label for="email">E-Mail</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<fieldset>
<legend>Passwort</legend>
<label for="passwort">Passwort</label>
<input id="passwort" name="passwort" type="password" autocomplete="new-password" minlength="8" required>
<label for="passwort-wdh">Passwort wiederholen</label>
<input id="passwort-wdh" name="passwort-wdh" type="password" autocomplete="new-password" minlength="8" required>
</fieldset>
<label for="agb">
<input id="agb" name="agb" type="checkbox" required>
Ich akzeptiere die AGB
</label>
<button type="submit">Konto erstellen</button>
</form>Warum funktioniert das?
fieldset und legend gruppieren zusammengehörige Felder. Die Checkbox steht innerhalb ihres Labels, wodurch die Klickfläche größer wird. Der Server muss alle Werte trotzdem erneut prüfen.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Barrierefreie Rezeptseite
Baue eine Rezeptseite mit Navigation, Bild, Zutatenliste und Formular für Kommentare. Prüfe die Seite anschließend nur mit Tastatur und einem Screenreader.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.