HTMLCSSJavaScriptIndexRoadmapImpressum

Formular-Events

Formular-Events reagieren auf Eingaben und Aktionen in Formularen – zum Beispiel beim Tippen, beim Verlassen eines Feldes oder beim Absenden. Sie sind die Grundlage für interaktive Formulare, Live-Validierung und benutzerfreundliche Eingabefelder.

input

Das input-Event wird bei jeder Änderung im Eingabefeld ausgelöst – also bei jedem getippten Zeichen. Es eignet sich für Live-Suche, Zeichenzähler oder sofortiges Feedback während der Eingabe.

HTML – Formular

1<form id="kontaktFormular">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">E-Mail:</label>
6    <input type="email" id="email" name="email">
7
8    <button type="submit">Absenden</button>
9</form>

JavaScript – input-Event

1const name = document.getElementById("name");
2
3name.addEventListener("input", function(event) {
4    console.log("Aktueller Wert:", event.target.value);
5});

Ausgabe

Tippe etwas – die Ausgabe aktualisiert sich bei jedem Zeichen.

change

Das change-Event feuert erst, wenn der Nutzer die Eingabe abgeschlossen hat – also das Feld verlässt oder Enter drückt. Im Gegensatz zu input nicht bei jedem einzelnen Zeichen.

JavaScript – change-Event

1const email = document.getElementById("email");
2
3email.addEventListener("change", function(event) {
4    console.log("E-Mail geändert:", event.target.value);
5});

Ausgabe

Tippe eine E-Mail und verlasse das Feld – change feuert erst dann.

focus

Das focus-Event tritt auf, wenn ein Eingabefeld aktiv wird – zum Beispiel durch Klick oder Tab-Taste. Typisch: Hervorhebung des Feldes oder Anzeige eines Hinweistextes.

JavaScript – focus-Event

1name.addEventListener("focus", function() {
2    console.log("Eingabefeld ist aktiv");
3});

Ausgabe

Klicke ins Eingabefeld, um focus zu sehen.

blur

Das blur-Event wird ausgelöst, wenn das Eingabefeld den Fokus verliert. Oft nutzt man es für Validierung: Erst prüfen, wenn der Nutzer das Feld verlassen hat.

JavaScript – blur-Event

1name.addEventListener("blur", function() {
2    console.log("Eingabefeld verlassen");
3});

Ausgabe

Fokussiere das Feld und verlasse es wieder.

Unterschied zwischen focus und blur

focus = Feld wird aktiv (Klick oder Tab). blur = Feld wird verlassen.

Beim Feldwechsel: zuerst blur am alten Feld, dann focus am neuen. Typisch: bei focus Hinweise zeigen, bei blur Eingaben prüfen.

submit

Das submit-Event wird ausgelöst, wenn ein Formular abgeschickt wird – durch Klick auf den Submit-Button oder durch Enter in einem Eingabefeld. Hier verarbeitest du die Formulardaten.

JavaScript – submit-Event

1const formular = document.getElementById("kontaktFormular");
2
3formular.addEventListener("submit", function(event) {
4    event.preventDefault();
5    console.log("Formular wurde abgesendet!");
6});

Ausgabe

Klicke auf Absenden.

Standardverhalten mit preventDefault() verhindern

Standardmäßig lädt der Browser die Seite neu, wenn ein Formular abgeschickt wird. Mit event.preventDefault() verhinderst du das – die Seite bleibt stehen und du kannst die Daten per JavaScript selbst verarbeiten.

JavaScript – preventDefault()

1formular.addEventListener("submit", function(event) {
2    event.preventDefault();
3    // Seite lädt nicht neu – du steuerst das Absenden selbst
4});

Ausgabe

Ohne preventDefault() würde die Seite neu laden.

Formularwerte auslesen

Mit element.value liest du den Inhalt eines Eingabefelds aus. Die id im HTML muss mit der im JavaScript übereinstimmen.

JavaScript – Werte auslesen

1formular.addEventListener("submit", function(event) {
2    event.preventDefault();
3
4    const nameWert = document.getElementById("name").value;
5    const emailWert = document.getElementById("email").value;
6
7    console.log("Name:", nameWert);
8    console.log("E-Mail:", emailWert);
9});

Ausgabe

Fülle das Formular aus und sende es ab.

Eingaben überprüfen

Bevor du ein Formular verarbeitest, prüfst du, ob die Eingaben sinnvoll sind. Ist ein Pflichtfeld leer, zeigst du eine Meldung und brichst mit return ab.trim() entfernt Leerzeichen am Anfang und Ende.

JavaScript – Eingaben prüfen

1formular.addEventListener("submit", function(event) {
2    event.preventDefault();
3
4    const nameWert = document.getElementById("name").value;
5
6    if (nameWert.trim() === "") {
7        alert("Bitte gib deinen Namen ein!");
8        return;
9    }
10
11    console.log("Formular ist gültig:", nameWert);
12});

Ausgabe

Sende einmal leer und einmal mit Namen ab.

Checkbox-Events

Bei Checkboxen reagierst du meist auf change. Über event.target.checked siehst du, ob die Checkbox aktiviert (true) oder deaktiviert (false) ist.

HTML – Checkbox

1<label>
2    <input type="checkbox" id="newsletter"> Newsletter abonnieren
3</label>

JavaScript – Checkbox-Event

1const newsletter = document.getElementById("newsletter");
2
3newsletter.addEventListener("change", function(event) {
4    console.log("Newsletter:", event.target.checked);
5});

Ausgabe

Aktiviere oder deaktiviere die Checkbox.

Radio-Button-Events

Radio-Buttons mit gleichem name gehören zu einer Gruppe – es kann nur eine Option aktiv sein. Auch hier nutzt du change und prüfst mit event.target.checked, welche Option gewählt wurde.

HTML – Radio-Buttons

1<label><input type="radio" name="versand" value="standard"> Standard</label>
2<label><input type="radio" name="versand" value="express"> Express</label>

JavaScript – Radio-Button-Event

1const versandOptionen = document.querySelectorAll('input[name="versand"]');
2
3versandOptionen.forEach(function(option) {
4    option.addEventListener("change", function(event) {
5        if (event.target.checked) {
6            console.log("Gewählt:", event.target.value);
7        }
8    });
9});

Ausgabe

Wähle eine Versandoption.

Select-Events

Bei <select>-Elementen feuert change, sobald der Nutzer eine andere Option wählt. Den gewählten Wert liest du über event.target.value aus.

HTML – Select

1<select id="land">
2    <option value="de">Deutschland</option>
3    <option value="at">Österreich</option>
4    <option value="ch">Schweiz</option>
5</select>

JavaScript – Select-Event

1const land = document.getElementById("land");
2
3land.addEventListener("change", function(event) {
4    console.log("Ausgewählt:", event.target.value);
5});

Ausgabe

Wähle ein anderes Land aus.

Merksatz: Für Live-Eingabe nutzt du input, für abgeschlossene Änderungen change. Beim Absenden eines Formulars verhinderst du mit preventDefault() das Neuladen der Seite.

Aufgaben

Baue ein kleines Kontaktformular und setze die Events selbst um:

  1. Zeige unter einem Namensfeld live an, wie viele Zeichen bereits getippt wurden (input-Event).
  2. Beim Verlassen des E-Mail-Felds (blur) prüfe, ob das Feld leer ist – und zeige dann einen Hinweistext an.
  3. Fange das submit-Event ab, verhindere das Neuladen und gib Name sowie E-Mail in der Konsole aus. Ist der Name leer, zeige eine Fehlermeldung und brich ab.
  4. Ergänze eine Newsletter-Checkbox und ein Land-select. Beim Absenden sollen auch checked und der gewählte Wert mitprotokolliert werden.

Im nächsten Kapitel lernst du: Fenster und Dokument-Events