HTML-Formularelemente
Formular-Attribute verfeinerten das form-Tag. Formularelemente sind die Teile darin — Labels, Textbereiche, Listen, Buttons, Gruppierung. Diese Lektion kartiert das Toolkit. Input-Typen folgen.
Warum Formularelemente zählen
Ein nacktes form mit nur Attributen sammelt keine Antworten. Nutzer brauchen Controls. textarea statt einzeiligem input oder select statt Freitext ändert Nutzbarkeit und Daten.
Direkte Antwort
1) Jedes sichtbare Control mit label. 2) input für viele Einzeiler/Toggles. 3) textarea mehrzeilig. 4) select+option feste Liste. 5) button für Aktionen. 6) fieldset+legend Gruppe. action/method am äußeren form.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
Profil-fieldset mit gemischten Controls
Kleiner Profil-Editor: eine Gruppe, mehrzeilige Bio, Level-Dropdown, Speichern.
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
Profil-Demo lesen
- fieldset+legend benennen die Gruppe
- textarea passt zur Bio
- select/option begrenzen Level
- jedes Control hat id und name
- submit sendet das Formular
- action/method vom vorigen Lesson
Einstellungen: Radios und Button-Typen
Manchmal ist die Antwort exklusiv. Radios teilen sich name. Labels an jeder Option. submit vs reset vs button vergleichen.
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
Einstellungs-Demo lesen
- gleiche name → eine Radio-Gruppe
- Radio im label macht Text klickbar
- legend betitelt Theme
- submit sendet; reset löscht — speichert nicht
- weitere input-Typen später
Das richtige Control wählen
- Kurzantwort/E-Mail/Passwort: input
- Absatztext: textarea
- feste Liste: select oder Radios
- Abschnitt gruppieren: fieldset+legend
- benennen: label
- senden: button type=submit
Übung — Formularelemente zusammenbauen
- Profil-Demo kopieren; legend und option ändern
- textarea kurz durch input ersetzen
- zweites fieldset für Notizen
- Theme-Radios; Labels klicken
- Clear dann Save
- Control außerhalb form
- Satz: Elemente = gelabelte Controls innen; Attribute am form-Tag sind eine andere Schicht
Typische Fehler
- Controls ohne label
- div-Titel statt legend
- submit/Felder außerhalb form
- einzeiliges input für lange Texte
- name vergessen
- reset als Speichern missverstehen
- denken, diese Lektion ersetzt action/method
Kurzfassung
- Formularelemente sind Controls in form
- label, input, textarea, select, button, fieldset/legend decken Anfänger-UIs ab
- immer labeln; verwandte Felder gruppieren
- Control zur Frage passend wählen
- Form-Attribute und Input-Typen sind getrennte Schichten
- als Nächstes: Input-Typen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 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