Formularsteuerelemente: input-Typen, select, textarea
Verwenden Sie Text-, E-Mail-, Zahlen-, Datums-, Checkbox-, Radio-, Range-, Datei- und Farbeingaben zusammen mit select- und textarea-Elementen.
Formularsteuerelemente: input-Typen, select, textarea ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Die vollständige Palette der Input-Typen
HTML5 hat neben Text viele spezialisierte Input-Typen eingeführt. Jeder Typ teilt dem Browser mit, welche Art von Daten erwartet wird, und ermöglicht native Validierung, passende Tastaturen auf Mobilgeräten sowie native UI-Steuerelemente der jeweiligen Plattform.
Text-, Such- und URL-Inputs
type="text" ist der Fallback für einfachen Text. type="search" deutet auf eine für die Suche optimierte Tastatur hin und zeigt häufig eine Schaltfläche zum Löschen an. type="url" validiert das URL-Format und zeigt auf Mobilgeräten eine URL-Tastatur an.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-Mail und Tel
type="email" validiert das E-Mail-Format und zeigt eine für E-Mail optimierte Tastatur mit einer @-Taste an. type="tel" zeigt eine numerische Telefontastatur an (validiert das Format jedoch nicht, da sich Telefonformate je nach Land unterscheiden).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Number-, Range- und Date-Typen
type="number" mit min/max/step für numerische Daten. type="range" für Schieberegler. type="date", type="time", type="datetime-local" für zeitbezogene Daten mit nativen Auswahlfeldern.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Checkbox und Radio
Checkboxen sind unabhängige Umschalter. Radio-Buttons derselben Gruppe (mit demselben name) erlauben nur eine Auswahl. Für jedes Element benötigen Sie ein zugehöriges Label.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Farbe, Datei und verborgen
type="color" zeigt einen nativen Farbwähler an. type="file" öffnet einen Dateiauswahldialog; verwenden Sie das accept-Attribut, um die Dateitypen einzuschränken. type="hidden" übermittelt Daten ohne sichtbares UI-Steuerelement.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Select-Dropdowns
Das Element <select> erstellt ein Dropdown. Verwenden Sie multiple für Mehrfachauswahl (ergibt selten eine gute UX). Gruppieren Sie Optionen mit <optgroup>, wenn die Liste lang ist.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Textarea
<textarea> erstellt ein mehrzeiliges Texteingabefeld. Verwenden Sie rows und cols für die anfängliche Größe oder CSS für mehr Kontrolle. Das schließende Tag ist erforderlich, und jeder Inhalt zwischen den Tags wird zum Standardwert.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Optionen für die Autovervollständigung
<datalist> stellt Vorschläge für ein Eingabefeld bereit, ohne freie Texteingabe einzuschränken. Verknüpfen Sie das Eingabefeld über die Attribute list und id mit dem datalist.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Die Attribute value und name
name ist der Schlüssel, der bei der Formularübermittlung gesendet wird. value legt den Anfangswert fest. Bei Checkboxen und Radio-Buttons wird value übermittelt, wenn das Element ausgewählt ist. Bei Texteingabefeldern ist value der vorausgefüllte Inhalt.
Größe von input und placeholder
placeholder zeigt Hinweistext an, wenn das Eingabefeld leer ist. Der Hinweis verschwindet beim Fokussieren und ist kein Ersatz für ein sichtbares Label. size legt die sichtbare Breite in Zeichen fest; bevorzugen Sie CSS für die Größenfestlegung.
Schnelltest
Welcher Input-Typ zeigt auf Mobilgeräten eine numerische Tastatur an und validiert, dass der eingegebene Wert eine gültige Zahl ist?
Zusammenfassung: Formularsteuerelemente
Verwenden Sie semantische Input-Typen: email für E-Mail-Adressen, number für Zahlen und date für Datumsangaben. Verwenden Sie select für feste Auswahlmöglichkeiten, datalist für vorschlagsbasierte Autovervollständigung und textarea für mehrzeiligen Text. Fügen Sie für die Übermittlung immer name-Attribute und, wo sinnvoll, value-Attribute hinzu.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Formularsteuerelemente: input-Typen, select, textarea“ kostenlos?
Ja — der vollständige Text von „Formularsteuerelemente: input-Typen, select, textarea“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Formularsteuerelemente: input-Typen, select, textarea“?
Verwenden Sie Text-, E-Mail-, Zahlen-, Datums-, Checkbox-, Radio-, Range-, Datei- und Farbeingaben zusammen mit select- und textarea-Elementen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Formularsteuerelemente: input-Typen, select, textarea“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Formularsteuerelemente: input-Typen, select, textarea
- ARIA und Barrierefreiheit: label, role, aria-*
- Semantisches HTML5: Semantik statt div-Suppe
- Attribute zur Formularvalidierung