JavaScript - Form Events: A Beginner's Guide

Hallo那里，有抱负的开发者们！作为一名拥有多年经验的计算机科学教师，我很高兴能引导你们进入JavaScript表单事件的精彩世界。如果你是编程新手，不用担心——我们将从基础知识开始，逐步深入。所以，拿起一杯咖啡，舒服地坐下来，让我们一起开始吧！

Was sind Form Events?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Form Events sind. In der Webentwicklung sind Formulare wie digitale Papierkram – sie sammeln Informationen von Benutzern. Form Events sind besondere Ereignisse, die auftreten, wenn Benutzer mit diesen Formularen interagieren. Es ist so, als ob du ein Stellenangebot ausfüllst und die Rezeptionistin jedes Mal bemerkt, wenn du den Stift aufhebst oder ablegst – das ist, was Form Events in der digitalen Welt tun!

Häufige Form Events

Schauen wir uns einige der häufigsten Form Events an, die du begegnen wirst:

Event Name	Beschreibung
submit	Ausgelöst, wenn das Formular submitted wird
reset	Ausgelöst, wenn das Formular zurückgesetzt wird
focus	Ausgelöst, wenn ein Element den Fokus erhält
blur	Ausgelöst, wenn ein Element den Fokus verliert
change	Ausgelöst, wenn der Wert eines Eingabeelements geändert wird
input	Ausgelöst, wenn der Wert eines Eingabeelements geändert wird (bei jeder Tastatureingabe)

Nun tauchen wir ein in jeden dieser mit einigen praktischen Beispielen!

Beispiele für Form Events in der Praxis

1. Das Submit Event

Das Submit-Event ist wahrscheinlich das am häufigsten verwendete Formularereignis, das du verwenden wirst. Es wird ausgelöst, wenn der Benutzer versucht, das Formular zu senden.

<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Verhindere das tatsächliche Absenden des Formulars
var name = document.getElementById("name").value;
alert("Hallo, " + name + "! Dein Formular wurde submitted.");
});
</script>

In diesem Beispiel hören wir auf das Submit-Event unseres Formulars. Wenn es auftritt, verhindern wir das Standardverhalten (das wäre das tatsächliche Absenden des Formulars), holen den Wert aus der Namensingabe ab und zeigen eine Alert mit einer Begrüßung an.

2. Das Reset Event

Das Reset-Event tritt auf, wenn ein Formular auf seine Standardwerte zurückgesetzt wird. Es ist wie das Drücken der "Rückgängig"-Taste auf deinem Formular!

<form id="myForm">
<input type="text" id="name" placeholder="Enter your name">
<button type="reset">Reset</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("Das Formular wurde zurückgesetzt!");
});
</script>

Hier wird eine Alert angezeigt, wenn die Reset-Taste geklickt wird, um dir mitzuteilen, dass das Formular zurückgesetzt wurde.

3. Die Focus und Blur Events

Focus- und Blur-Events sind wie das Rampenlicht der Formularwelt. Focus tritt auf, wenn ein Element das Rampenlicht erhält, und Blur ist, wenn es das Rampenlicht verliert.

<input type="text" id="myInput" placeholder="Klicke mich!">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "gelb";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

In diesem Beispiel wird die Eingabe gelb, wenn du darauf klickst (Fokus), und kehrt bei einem Klick weg (Blur) zum Normalzustand zurück. Es ist, als ob die Eingabe schüchtern und errötet, wenn du ihr Aufmerksamkeit schenkst!

4. Das Change Event

Das Change-Event wird ausgelöst, wenn der Wert eines Eingabeelements geändert wird und das Element den Fokus verliert.

<select id="colorSelect">
<option value="">Choose a color</option>
<option value="red">Rot</option>
<option value="blue">Blau</option>
<option value="green">Grün</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

Dieses Skript ändert die Hintergrundfarbe der Seite basierend auf deiner Auswahl. Es ist, als hättest du einen Zauberstab, der den ganzen Raum malt!

5. Das Input Event

Das Input-Event ist ähnlich zum Change-Event, aber es wird sofort nach einer Wertänderung ausgelöst.

<input type="text" id="textInput" placeholder="Tippe etwas...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "Du hast eingegeben: " + this.value;
});
</script>

Dieses Beispiel zeigt Echtzeit-Feedback, während du tippst. Es ist, als hättest du einen freundlichen Echo, der das, was du sagst, in Textform wiederholt!

Alles zusammenfügen

Nun, da wir diese Ereignisse in Aktion gesehen haben, erstellen wir ein komplexeres Beispiel, das mehrere Ereignisse verwendet:

<form id="registrationForm">
<input type="text" id="username" placeholder="Benutzername">
<input type="password" id="password" placeholder="Passwort">
<input type="email" id="email" placeholder="E-Mail">
<button type="submit">Registrieren</button>
<button type="reset">Löschen</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// Submit Event
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Registrierung submitted für " + username.value);
});

// Reset Event
form.addEventListener("reset", function() {
alert("Formular gelöscht!");
});

// Focus Events
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// Blur Events
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// Input Event
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "grün";
} else {
this.style.borderColor = "rot";
}
});
</script>

Dieses Registrierungsformular zeigt alle Ereignisse, die wir gelernt haben:

• Das Submit-Event verhindert das tatsächliche Absenden des Formulars und zeigt eine Alert anstelle dessen.
• Das Reset-Event benachrichtigt, wenn das Formular gelöscht wird.
• Focus- und Blur-Events ändern die Hintergrundfarbe der Eingaben, wenn sie ausgewählt oder fokussiert werden.
• Das Input-Event auf dem E-Mail-Feld ändert die Randfarbe basierend darauf, ob die Eingabe ein "@"-Symbol enthält.

Schlussfolgerung

Herzlichen Glückwunsch! Du hast gerade deine ersten Schritte in die Welt der JavaScript-Formularevents gesetzt. Denke daran, diese Ereignisse sind wie die Sinne deiner Webseite – sie helfen deinem Code, "zu sehen" und "zu fühlen", was der Benutzer macht. Mit Übung wirst du in der Lage sein, interaktive und reaktionsschnelle Formulare zu erstellen, die deine Websites zum Leben erwecken.

Weiterspielen, weiter codieren und vor allem: Spaß haben! Die Reise von tausend Meilen beginnt mit einem Schritt, und du hast gerade einen großen gemacht. Frohes Coden, zukünftige Entwickler!

Credits: Image by storyset