Lädt...

HTML-Formulare

Responsive passte die Seite an Breiten an. Formulare starten ein neues Kapitel: Nutzer tippen und senden. Container ist form.

Warum Formulare zählen

Statische Seiten zeigen; Formulare sammeln. Ohne form weiß der Browser nicht, welche Controls zu einem Submit gehören.

Direkte Antwort

1) form mit action und method. 2) Controls mit name. 3) label for = id. 4) Submit-Button. Markup zuerst.

📊 Form parts at a glance

Part	Job	Beginner tip
form	Groups controls for one submission	Keep related fields inside one form
action	URL or path that receives the data	Practice paths are fine while learning
method	How the browser sends the payload	get puts data in the URL; post uses the request body
input (+ others)	Collects a value from the user	Always set name for submitted keys
label	Names the field for people and assistive tech	for must match the control id
submit	Triggers sending the form	Prefer type="submit" on buttons

Minimales Formular-Skelett

Mit Container und zwei Attributen starten. Übungspfad reicht zum Lernen.

Minimal form skeleton

html

<form action="/subscribe" method="post">
<!-- fields go here -->
</form>

Skelett lesen

form ist die Submit-Grenze
action = Empfangspfad
post = Body
get = URL
404 ohne echten Server ist beim Lernen ok

Beschriftetes Feld plus Submit

Mindestens ein Feld und ein Sendeweg. for muss id matchen; name setzen.

Subscribe form with label

html

<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>

Subscribe-Demo lesen

for und id verbinden Label und Control
name Schlüssel der Payload
type=email Hinweis für Browser
button type=submit sendet

GET vs POST

get für bookmarkbare Suche; post wenn Daten nicht in der Adresszeile bleiben sollen.

Übung — kleines Subscribe-Formular

form mit post und Übungs-action
beschriftetes E-Mail-input mit name
button type=submit
Rendering prüfen
input kurz außerhalb testen

Typische Fehler

Inputs außerhalb von form
fehlendes name
Button ohne type=submit
Label/for mismatch
action und method verwechseln

Kurzfassung

form gruppiert Controls für einen Send
action + method beschreiben Ziel und Stil
Label und name machen Felder sendbar
als Nächstes: Formular-Attribute

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt