Formulare: input, label, button
Erstellen Sie barrierefreie HTML-Formulare mit beschrifteten Eingabefeldern, verschiedenen input-Typen, Textareas, Selects und Submit-Buttons.
Formulare: input, label, button ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.
Warum HTML-Formulare?
Formulare sind der wichtigste Weg, auf dem Benutzer Daten an einen Server senden: beim Anmelden, Suchen, Bezahlen oder für Feedback. Browser bieten zahlreiche integrierte Funktionen – Validierung, Tastatureingaben und mobile Tastaturen –, die Sie durch die Verwendung nativer Formularelemente ohne zusätzlichen Aufwand erhalten.
Das <form>-Element
Das <form>-Element umschließt alle zusammengehörigen Steuerelemente. Das action-Attribut legt die URL fest, an die die Daten gesendet werden; method legt GET oder POST fest. Bei SPAs verhindern Sie häufig die standardmäßige Übermittlung und behandeln sie mit JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Text- und E-Mail-Eingaben
Das <input>-Element ist das zentrale Element von Formularen. Das type-Attribut ändert sein Verhalten. Verwenden Sie type="text" für freien Text und type="email" für E-Mail-Adressen (validiert das Format und zeigt die passende mobile Tastatur an).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Passwort-, Zahlen- und weitere Typen
Weitere nützliche Eingabetypen: password (verbirgt Zeichen), number (validiert Zahlen und zeigt Drehfelder an), date (zeigt eine Datumsauswahl an), range (Schieberegler), checkbox (boolescher Schalter), radio (Auswahl aus mehreren Optionen).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">Das <label>-Element — entscheidend für die Barrierefreiheit
Jede Eingabe muss über ein zugehöriges <label> verfügen. Das Label teilt Benutzern und Bildschirmleseprogrammen mit, wofür das Feld gedacht ist. Durch Klicken auf das Label wird die Eingabe fokussiert. Verwenden Sie das for-Attribut, dessen Wert mit der id der Eingabe übereinstimmt.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea und Select
Verwenden Sie <textarea> für mehrzeiligen Text (z. B. Kommentare). Verwenden Sie <select> mit untergeordneten <option>-Elementen für Auswahlmöglichkeiten in Dropdown-Menüs. Fügen Sie immer eine standardmäßig leere Option mit einer Aufforderung wie „Kategorie auswählen“ ein.
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Checkboxen und Radiobuttons
Gruppieren Sie zusammengehörige Checkboxen mit <fieldset> und <legend>. Radiobuttons mit demselben name erlauben nur eine Auswahl. Jeder Radiobutton benötigt ein eigenes Label.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Buttons: submit, reset, button
<button type="submit"> sendet das Formular ab. type="reset" setzt alle Felder zurück. type="button" bewirkt standardmäßig nichts und wird zusammen mit JavaScript-Event-Listenern verwendet. Legen Sie den Typ immer fest – standardmäßig ist er submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Eingaben mit <fieldset> gruppieren
<fieldset> gruppiert zusammengehörige Steuerelemente visuell und semantisch. Das erforderliche <legend> stellt eine Beschriftung bereit. Screenreader lesen die Legende vor jedem Steuerelement der Gruppe vor und liefern dadurch Kontext.
Das name-Attribut – Was wird übermittelt
Wenn ein Formular abgesendet wird, senden Browser für jedes Steuerelement das name=value-Paar. Nur Steuerelemente mit einem name-Attribut werden einbezogen. Bei Checkboxen werden nur ausgewählte gesendet.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Autofill und autocomplete
Setzen Sie Attributwerte von autocomplete wie email, given-name, new-password oder current-password, damit Passwortmanager und die Autofill-Funktion des Browsers Formulare korrekt ausfüllen können.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Schnelltest
Welchen Zweck hat das for-Attribut eines <label>-Elements?
Zusammenfassung: Barrierefreie HTML-Formulare
Jede Eingabe benötigt ein Label. Wählen Sie für die Daten den passenden Eingabetyp. Gruppieren Sie zusammengehörige Steuerelemente mit fieldset. Verwenden Sie für das Absenden button type=submit. Nutzen Sie zunächst die nativen Formularfunktionen – Validierung, Tastaturnavigation und Autofill –, bevor Sie JavaScript hinzufügen.
Häufig gestellte Fragen
Ist die Lektion „Formulare: input, label, button“ kostenlos?
Ja — der vollständige Text von „Formulare: input, label, button“ 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 „Formulare: input, label, button“?
Erstellen Sie barrierefreie HTML-Formulare mit beschrifteten Eingabefeldern, verschiedenen input-Typen, Textareas, Selects und Submit-Buttons. 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 4 von 4.
Wie lange dauert die Lektion „Formulare: input, label, button“?
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
- Dokumentstruktur: DOCTYPE, html, head, body
- Semantische Tags: header, nav, main, article, footer
- Text, Bilder, Links und Listen
- Formulare: input, label, button