Formulare und Eingaben

Formulare sind die wichtigste Methode, um Informationen von Benutzern auf Webseiten zu sammeln. Mit JavaScript können wir diese Eingaben prüfen und verarbeiten.

Zugriff auf Formularelemente

// Über die DOM-Selektion
const formular = document.querySelector("#meinFormular");
const emailInput = document.querySelector("#email");

// Zugriff auf die Formularelemente
const nameInput = formular.elements["name"];

Formular-Events

Das submit-Event

document.querySelector("#meinFormular").addEventListener("submit", function(event) {
    // Verhindert das Neuladen der Seite
    event.preventDefault();

    // Daten aus dem Formular auslesen
    const name = this.elements["name"].value;
    const email = this.elements["email"].value;

    console.log("Name:", name);
    console.log("E-Mail:", email);
});

Input- und Change-Events

// Reagiert sofort bei jeder Änderung
document.querySelector("#suchfeld").addEventListener("input", function() {
    console.log("Aktuelle Eingabe:", this.value);
});

// Reagiert erst, wenn das Element den Fokus verliert
document.querySelector("#alterInput").addEventListener("change", function() {
    console.log("Neuer Wert:", this.value);
});

Arten von Formularelementen

Textfelder

<input type="text" id="name" name="name">
<input type="email" id="email" name="email">
<textarea id="kommentar" name="kommentar"></textarea>

// Wert auslesen
const nameWert = document.querySelector("#name").value;

// Wert setzen
document.querySelector("#email").value = "beispiel@mail.com";

Checkboxen

<input type="checkbox" id="newsletter" name="newsletter">

const checkbox = document.querySelector("#newsletter");

// Überprüfen, ob angekreuzt
if (checkbox.checked) {
    console.log("Newsletter abonniert!");
}

// Ankreuzen
checkbox.checked = true;

Radiobuttons

<input type="radio" id="option1" name="option" value="erste">
<input type="radio" id="option2" name="option" value="zweite">

// Alle Radiobuttons mit dem Namen "option"
const radioButtons = document.querySelectorAll('input[name="option"]');

// Herausfinden, welche Option ausgewählt ist
let ausgewählterWert;
for (const radioButton of radioButtons) {
    if (radioButton.checked) {
        ausgewählterWert = radioButton.value;
        break;
    }
}

Auswahlfelder (Select)

<select id="land" name="land">
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
</select>

const selectElement = document.querySelector("#land");

// Ausgewählten Wert auslesen
const ausgewähltesLand = selectElement.value;

// Eine Option auswählen
selectElement.value = "at";

Formularvalidierung

Einfache Validierung

document.querySelector("#meinFormular").addEventListener("submit", function(event) {
    const nameInput = this.elements["name"];
    const emailInput = this.elements["email"];

    // Name überprüfen
    if (nameInput.value.trim() === "") {
        alert("Bitte geben Sie Ihren Namen ein.");
        event.preventDefault();
        return;
    }

    // E-Mail überprüfen
    if (!emailInput.value.includes("@")) {
        alert("Bitte geben Sie eine gültige E-Mail-Adresse ein.");
        event.preventDefault();
        return;
    }
});

HTML5-Validierung nutzen

HTML5 bietet eingebaute Validierungsattribute:

<input type="email" id="email" name="email" required>
<input type="number" id="alter" name="alter" min="18" max="100">

Formulardaten verarbeiten

Mit dem FormData-Objekt können wir einfach alle Formulardaten auslesen:

document.querySelector("#meinFormular").addEventListener("submit", function(event) {
    event.preventDefault();

    // FormData-Objekt erstellen
    const formData = new FormData(this);

    // Einzelne Werte auslesen
    console.log("Name:", formData.get("name"));
    console.log("E-Mail:", formData.get("email"));

    // Über alle Werte iterieren
    for (const [name, wert] of formData.entries()) {
        console.log(`${name}: ${wert}`);
    }
});

Übung: Kontaktformular mit Validierung

Aufgabe: Formulareingaben verarbeiten

Erstellen Sie ein Kontaktformular mit folgenden Anforderungen:

1. Das Formular soll folgende Felder enthalten:

   • Name (Pflichtfeld)
   • E-Mail (Pflichtfeld, muss gültiges Format haben)
   • Nachricht (Pflichtfeld, mindestens 10 Zeichen)
   • Checkbox “AGB akzeptieren” (muss angekreuzt sein)

2. Bei Fehlern sollen entsprechende Meldungen angezeigt werden

3. Bei erfolgreicher Validierung:

   • Das Absenden verhindern
   • Eine Erfolgsmeldung anzeigen
   • Das Formular zurücksetzen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Kontaktformular</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .error {
            color: red;
            font-size: 0.9em;
            display: none;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
            padding: 10px;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Kontaktformular</h1>

    <div id="successMessage" class="success">
        Vielen Dank für Ihre Nachricht!
    </div>

    <form id="contactForm">
        <div class="form-group">
            <label for="name">Name *</label>
            <input type="text" id="name" name="name">
            <div id="nameError" class="error">Bitte geben Sie Ihren Namen ein.</div>
        </div>

        <div class="form-group">
            <label for="email">E-Mail *</label>
            <input type="email" id="email" name="email">
            <div id="emailError" class="error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</div>
        </div>

        <div class="form-group">
            <label for="message">Nachricht *</label>
            <textarea id="message" name="message" rows="5"></textarea>
            <div id="messageError" class="error">Bitte geben Sie eine Nachricht mit mindestens 10 Zeichen ein.</div>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" id="terms" name="terms">
                Ich akzeptiere die AGB *
            </label>
            <div id="termsError" class="error">Sie müssen die AGB akzeptieren.</div>
        </div>

        <button type="submit">Absenden</button>
    </form>

    <script>
        // Hier Ihren JavaScript-Code einfügen
    </script>
</body>
</html>

Zusammenfassung

• Mit Formularen sammeln wir Benutzereingaben auf Webseiten
• Wichtige Events für Formulare sind submit, input und change
• Die verschiedenen Formularelemente (Textfelder, Checkboxen, Radiobuttons, Select) haben unterschiedliche Eigenschaften
• Mit event.preventDefault() verhindern wir das Neuladen der Seite beim Absenden
• Die Formularvalidierung hilft, korrekte Eingaben sicherzustellen
• Das FormData-Objekt macht es einfach, alle Formulardaten auf einmal auszulesen

Im nächsten Kapitel lernen wir, wie wir HTML-Elemente dynamisch erstellen und entfernen können.