Formulare in JavaScript
Die Teestube hat einen Zettel. Das Formular ist #slip. Darin ein Textfeld #guest mit dem Namen guest, ein Zahlenfeld #cups mit dem Namen cups und ein Button #send mit type="submit". Darunter sagt #note noch blank.
Ein Formular sammelt benannte Felder. Was eingetippt wurde, steht in value, und das ist immer eine Zeichenkette, auch bei type number. Senden ist das Ereignis submit auf dem Formular. Ohne preventDefault lädt der Browser die Adresse des Formulars und diese Seite ist weg. Dieser Zettel ruft preventDefault auf, damit die Notiz lesbar bleibt. Die Seite setzt guest auf lida, cups auf 2, klickt einmal auf send, und die Zeile lautet lida / 2 / stayed.
Nicht der Ticketstreifen
Der Ticketstreifen hatte einen Klick-Listener auf dem Elternteil und las event.target. Die Zeile war red / blue / gold / 1, ohne preventDefault. Die Tafel-Seite rief es auf einem Link auf. Die Zeile war click / seal / plaque / true / quiet. Dieser Zettel ist keines von beiden. Kein gold-Button, kein currentTarget. Das Ereignis heißt submit. Wichtig sind lida und die Zeichenkette 2.
getElementById("guest") findet das Feld über die id. slip.elements.guest findet es über den Namen, durch das Formular. Hier sind id und name dasselbe Wort. Eine spätere Lektion prüft leere oder ungültige Felder. Diese Seite nicht. Ein leerer Gast wird trotzdem gesendet.
Was der Zettel festhält
Die Notiz beginnt mit blank. Gast und Tassen sind leer. Die Beschriftung des Buttons bleibt send. Lies die Zeilen der Reihe nach. Jedes Stück startet vom leeren Zettel, außer der Seitenzeile: das ist die Demo unten. Die Demo klickt einmal auf send.
📊 Was der Zettel festhält
| Moment | Was du liest | Notiz | Leicht zu verwechseln |
|---|---|---|---|
| Gast auf lida gesetzt | guest.value |
lida | die id guest lesen |
| Tassen auf 2 gesetzt | cups.value |
2, eine Zeichenkette | die Zahl 2 erwarten |
| Klick auf send, die Funktion schreibt stayed | die Notiz | stayed | slip.submit(), das den Listener überspringt |
| beide Namen über das Formular | elements.guest und elements.cups |
lida 2 | elements.slip lesen |
| Seitenskript | die Zeile | lida / 2 / stayed | red / blue / gold / 1 |
value macht aus einem Zahlenfeld keine Zahl. Nach dem Speichern von 2 ist cups.value die Zeichen 2. typeof cups.value ist "string". Eine Zahl brauchst du später nur, wenn du selbst umwandelst. Diese Zeile tut das nicht.
send.click() löst submit aus, weil der Button-Typ submit ist. slip.submit() ist ein anderer Aufruf. Er schickt das Formular ab und führt den submit-Listener nicht aus. preventDefault darin kommt nie dran. Diese Seite benutzt den Klick.
Zwei Wege zum selben Feld
getElementById("cups") nimmt die id. slip.elements.cups nimmt den Namen, und nur wenn du das Formular schon hast. Hier sind beide Attribute dasselbe Wort. Wäre der Name count und die id bliebe cups, gäbe es elements.cups nicht, und das Feld hieße elements.count.
Der Name des Gastes
Das Feld ist leer. Das Skript speichert lida in value und liest dieselbe Eigenschaft in die Notiz zurück. Es wird noch nichts gesendet.
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);
Das Log ist lida. Die id ist guest. Die Notiz ist nicht das Wort guest. Sie ist die Zeichenkette in value.
Wie viele Tassen
Frischer Zettel. Das Tassenfeld ist type="number". Speichere 2, lies value, und frage typeof.
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);
Das Log ist 2 string. Die Box sieht nach Zahl aus, das Skript bekommt Text. Auch ohne Anführungszeichen kommt "2" als Zeichenkette zurück.
Der Senden-Button
Frischer Zettel. Der Listener sitzt auf dem Formular, für submit. Er ruft preventDefault auf und schreibt stayed. Dann klickt die Seite auf send. Sie ruft nicht slip.submit() auf.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);
Das Log ist stayed. Der Listener lief, also bleibt der Browser auf dieser Seite. slip.submit() statt des Klicks: pour läuft nicht. Die Notiz bleibt blank.
Namen auf dem Zettel
Frischer Zettel, kein Listener. Das Skript schreibt beide Felder über slip.elements und den Namen, dann fügt es sie in der Notiz zusammen.
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);
Das Log ist lida 2. elements.guest ist das Feld mit dem Namen guest, nicht ein Element mit der id slip. Das Leerzeichen trennt nur die Notiz. Die Seitenziele nutzt später /.
Die Zeile unter dem Zettel
Das Skript steht am Ende des body, nach Formular und Absätzen. mark beginnt als left. Der Listener verhindert das normale Senden, kopiert beide Werte in die Notiz und setzt mark auf stayed. Dann füllt das Skript lida und 2 und klickt einmal auf send. Die Zeile entsteht nach diesem Klick.
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>
Die Zeile lautet lida / 2 / stayed. Das erste Wort ist der Gast, das zweite die Tassen als Text, das letzte mark. Der Listener lief, also stayed und nicht left. Die Notiz endet auf lida / 2. blank ist weg. Die Ticketzeile ist eine andere Seite. Dieser Zettel prüft nicht, ob die Felder gefüllt sind.
An der Theke
- Speichere lida im Gastfeld und lies
value. Die Notiz ist lida. - Speichere 2 in den Tassen und lies
valuemittypeof. Die Notiz ist 2 string. - Höre auf submit, rufe
preventDefaultauf und klicke send. Die Notiz ist stayed. - Lies beide Felder über
slip.elements. Dann die Seitenziele: lida / 2 / stayed.
Daneben an der Theke
Die Beschriftungen bleiben guest, cups und send. Die Notiz ist nicht das Wort slip.
cups.valuefür die Zahl 2 haltenslip.submit()aufrufen und aufpourwartenpreventDefaultvergessen, sodass der Browser die Adresse lädt- die id guest lesen, obwohl du
valuewolltest - nach
slip.elements.slipsuchen - auf dieser Seite leere Felder oder Muster prüfen
- die Zeile als red / blue / gold / 1 lesen
Behalte das
- Nach dem Speichern von lida ist
guest.valuelida cups.valueist die Zeichenkette 2,typeofist"string"send.click()führt den submit-Listener aus,slip.submit()nichtpreventDefaultist der Grund, warum die Seite bleibt und die Notiz stayed sagen kannslip.elements.guestundslip.elements.cupslesen die benannten Felder- Die Seitenziele lautet lida / 2 / stayed
🧠 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