Formulare: Benutzereingaben erfassen
Erstellen Sie einfache Formulare mit Textfeldern, Schaltflächen und mehr
Formulare: Benutzereingaben erfassen ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 2 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 HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Formulare: Benutzereingaben erfassen
Willkommen zur nächsten Lektion! Heute lernen Sie, wie Sie Formulare in HTML erstellen. Formulare ermöglichen es Benutzern, Daten wie ihren Namen oder ihre E-Mail-Adresse auf Ihrer Webseite einzugeben.
Was sind Formulare?
Formulare werden verwendet, um Informationen von Benutzern zu erfassen. Wenn Sie beispielsweise ein Konto erstellen, füllen Sie ein Formular mit Feldern wie Ihrem Namen und Ihrer E-Mail-Adresse aus.
Formulare in HTML werden mit dem Tag <form> erstellt.
Ein einfaches Formular erstellen
Ein Formular wird mit dem Tag <form> erstellt. Innerhalb dieses Tags fügen Sie Eingabefelder, Schaltflächen und weitere Elemente hinzu.
Beispiel:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Eingabetypen für Formulare
HTML-Formulare unterstützen verschiedene Arten von Eingabefeldern. Hier sind einige gängige Typen:
text: Für kurze Texteingabenemail: Für E-Mail-Adressenpassword: Für Passwörternumber: Für Zahlen
Beispiel:
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Optionsfelder und Kontrollkästchen hinzufügen
Optionsfelder eignen sich für die Auswahl einer einzelnen Option, Kontrollkästchen für die Auswahl mehrerer Optionen.
Beispiel:
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Dropdown-Menüs hinzufügen
Mit dem Tag <select> können Sie Dropdown-Menüs erstellen, aus denen Benutzer eine Option auswählen können.
Beispiel:
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Formularschaltflächen
Schaltflächen ermöglichen es Benutzern, das Formular abzusenden oder zurückzusetzen. Dafür wird häufig der Tag <button> verwendet.
Beispiel:
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Ihr Formular formatieren
Mit CSS können Sie Ihr Formular formatieren und ansprechender gestalten. Sie können beispielsweise die Größe der Felder anpassen oder ihre Farben ändern.
Beispiel:
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
Großartige Arbeit!
Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Formulare erstellen, verschiedene Eingabetypen verwenden und Formulare formatieren. Formulare sind unverzichtbar, um Benutzerdaten zu erfassen und Ihre Webseiten interaktiv zu gestalten. In der nächsten Lektion erfahren Sie, wie Sie Multimedia wie Videos und Audio verwenden, um Ihre Seiten dynamischer zu machen. Freuen Sie sich auf noch mehr kreative Möglichkeiten!
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
- 16
- Lektionen
- 35
Häufig gestellte Fragen
Ist die Lektion „Formulare: Benutzereingaben erfassen“ kostenlos?
Ja — der vollständige Text von „Formulare: Benutzereingaben erfassen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Formulare: Benutzereingaben erfassen“?
Erstellen Sie einfache Formulare mit Textfeldern, Schaltflächen und mehr Du übst HTML for Kids 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 HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids 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 2 von 4.
Wie lange dauert die Lektion „Formulare: Benutzereingaben erfassen“?
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 HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-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
- Tabellen: Daten organisieren
- Formulare: Benutzereingaben erfassen
- HTML-Attribute
- Multimedia: Videos und Audio hinzufügen