Die Anmeldung zum Vereinsfest
Dein Verein feiert ein Fest. Alle sollen sich anmelden. Auf Papier schreibt jede Person Name und Wunsch auf einen Zettel.
Im Netz macht das ein Formular. Es hat Felder zum Ausfüllen und einen Knopf zum Absenden.
Am Ende dieser Lektion
Notiz
Ich kann ein Formular mit beschrifteten Feldern und einem Knopf bauen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Formular | Ein Bereich mit Feldern zum Ausfüllen. Tag: form. | |
| Eingabefeld | Ein Feld, in das man etwas schreibt oder wählt. Tag: input. | |
| Beschriftung | Ein Text, der sagt, was ins Feld gehört. Tag: label. | |
| type | Das Attribut, das die Art des Feldes bestimmt. | type="email" |
| Knopf | Eine Schaltfläche zum Anklicken. Tag: button. |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Starter
Probier es aus
Starter
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Ein Feld braucht eine Beschriftung
Ein Formular steht in form. Ein Feld ist ein input. Das Attribut type sagt, was für ein Feld es ist: text, email oder number.
Jedes Feld bekommt ein label. Das for im label und die id im input müssen gleich sein. Dann kann man auch auf den Text klicken.
Probiere es aus: Name und E-Mail
<form>
<label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname">
<br>
<label for="mail">E-Mail</label>
<input type="email" id="mail" name="mail">
<br>
<button type="submit">Absenden</button>
</form>
<!-- Füge ein Feld „Nachname“ hinzu. Das label und das input brauchen dieselbe id. -->
Häufige Arten von Feldern
| Tag und type | Wofür | Beispiel |
|---|---|---|
| input type="text" | Kurzer Text | Vorname |
| input type="email" | E-Mail-Adresse | [email protected] |
| input type="number" | Eine Zahl | Anzahl der Gäste |
| input type="checkbox" | Ein Kästchen zum Anhaken | Ich bringe Kuchen |
| input type="radio" | Eine Wahl aus mehreren | Ja oder Nein |
| textarea | Langer Text | Wünsche |
| select | Auswahl aus einer Liste | Beitrag zum Fest |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Kurze Prüfung: Felder
Probier es aus
Kurze Prüfung: Felder
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.