W3docs
de
Anmelden

JavaScript-Formulareigenschaften und -methoden

JavaScript-Formulareigenschaften und -methoden: document.forms, form.elements, Werte lesen, Checkboxen und Selects, input- und change-Events sowie submit, reset und focus.

Einführung in die JavaScript-Formularverarbeitung

Formulare sind der primäre Weg, über den Benutzer Daten an eine Webseite senden. Daher ist der zuverlässige Zugriff auf ihre Steuerelemente aus JavaScript heraus eine grundlegende Fähigkeit. Das DOM stellt Formulare und die darin enthaltenen Felder über eine Reihe dedizierter Collections (document.forms, form.elements) und Eigenschaften (input.value, checkbox.checked, select.value) sowie einige imperative Methoden (submit(), reset(), focus()) bereit.

Dieses Kapitel behandelt, wie man Formulare und Steuerelemente erreicht, ihre Werte liest und schreibt, mit den Events input und change auf Benutzereingaben reagiert und gängige Aktionen programmatisch auslöst. Einen umfassenderen Überblick darüber, wo Formulare im Dokumentbaum stehen, bietet Arbeiten mit Formularen im DOM.

Formulare und ihre Steuerelemente erreichen

document.forms und form.elements

Jedes Formular auf einer Seite ist über document.forms zugänglich. Dies ist eine spezielle Collection, die man per Index (document.forms[0]) oder — besser lesbar — über das name-Attribut des Formulars (document.forms.loginForm bzw. document.forms['loginForm']) ansprechen kann.

Sobald man ein Formular hat, liefert form.elements dessen benannte Steuerelemente auf genau die gleiche Weise — per Index oder über den name des Steuerelements. Der benannte Zugriff ist der empfohlene Stil, da er auch nach dem Hinzufügen oder Umordnen von Feldern funktioniert:

const form = document.forms.loginForm;     // a <form name="loginForm">
const userField = form.elements.username;  // an <input name="username">
// Shortcut: named controls are also exposed directly on the form
const samePassword = form.password;        // <input name="password">

Wenn mehrere Steuerelemente denselben name teilen (Radiobuttons), gibt form.elements.name eine RadioNodeList zurück — eine Collection, deren .value dem Wert des aktuell ausgewählten Buttons entspricht. Ein <fieldset> besitzt ebenfalls eine eigene elements-Collection, sodass man einen gruppierten Bereich wie ein Mini-Formular behandeln kann.

Hier ist ein vollständiges Beispiel, das auf ein Formular und seine Eingabefelder zugreift:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Form Example</title>
</head>
<body>
    <form name="loginForm">
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <div style="margin-top:15px;" id="output"></div>

    <script>
        const form = document.forms['loginForm'];
        const username = form.elements['username'];
        const password = form.elements['password'];
        form.onsubmit = function(event) {
            const output = document.getElementById('output');
            output.textContent = 'Username: ' + username.value + ' Password: ' + password.value;
            event.preventDefault(); // Prevent form submission
        }
    </script>
</body>
</html>
Probier es selbst »

Dieses Skript fängt die Formularübermittlung ab, zeigt Benutzername und Passwort in einem div auf der Seite an und verhindert, dass das Formular an einen Server gesendet wird.

Werte von Steuerelementen lesen und schreiben

Jeder Steuerelementtyp legt seinen aktuellen Zustand über eine leicht unterschiedliche Eigenschaft offen — zu wissen, welche man lesen muss, ist die halbe Arbeit:

SteuerelementLesen / schreiben mitHinweise
text, password, email, textarea.valueImmer ein string
checkbox.checked (boolean).value ist der Attribut-Wert, nicht ob die Box angehakt ist
radio (Gruppe)form.elements.groupName.valueWert des ausgewählten Buttons oder ""
<select>.valueWert der ausgewählten <option>; .options[i] und .selectedIndex ermöglichen feineren Zugriff
input.value = 'hello';            // text-like fields
checkbox.checked = true;          // tick a checkbox
select.value = 'medium';          // selects the matching <option>
const chosen = select.options[select.selectedIndex].text; // visible label

Ein häufiger Anfängerfehler ist, checkbox.value zu lesen, um festzustellen, ob eine Box angehakt ist — das gibt den statischen Attribut-string zurück ("on" standardmäßig), nicht den Angehakt-Zustand. Stattdessen sollte man .checked verwenden.

Mit Eingabewerten arbeiten

Das Manipulieren von Eingabewerten ist in JavaScript unkompliziert. So kann man Eingabewerte dynamisch setzen und auf der Webseite anzeigen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Input Value Example</title>
</head>
<body>
    <form name="userForm">
        <input type="text" name="firstName" placeholder="First Name" />
        <input type="text" name="lastName" placeholder="Last Name" />
        <input type="submit" value="Submit" />
    </form>
    <div id="welcomeMessage"></div>

    <script>
        const form = document.forms['userForm'];
        const firstName = form.elements['firstName'];
        const lastName = form.elements['lastName'];
        firstName.value = 'John';
        lastName.value = 'Doe';

        form.onsubmit = function(event) {
            const welcomeMessage = document.getElementById('welcomeMessage');
            welcomeMessage.textContent = 'Hello, ' + firstName.value + ' ' + lastName.value + '!';
            event.preventDefault(); // Prevents the form from submitting to a server
        }
    </script>
</body>
</html>
Probier es selbst »

In diesem Beispiel werden Vor- und Nachname auf 'John' bzw. 'Doe' voreingestellt. Beim Absenden des Formulars wird eine Begrüßung auf der Seite angezeigt, was sowohl das Setzen als auch das Abrufen von Eingabewerten demonstriert. Für komplexere Formulare bietet sich die FormData-API an, um Formulardaten einfach in Schlüssel-Wert-Paare zu serialisieren, ohne manuell auf jedes Element zugreifen zu müssen.

Fortgeschrittene Formulartechniken

Formularvalidierung

Echtzeit-Formularvalidierung ist entscheidend für die Benutzererfahrung. Hier ist ein Beispiel, wie man eine E-Mail-Adresse vor dem Absenden des Formulars validiert. Zu beachten ist, dass die HTML5-E-Mail-Validierung grundlegend ist und in der Produktion oft durch benutzerdefinierte Regex oder Bibliotheken ergänzt wird, da sie unvollständige Adressen wie 'w3docs@gmail' möglicherweise fälschlicherweise akzeptiert (Wer wissen möchte, wie man das behebt, kann die JavaScript Validation API lesen):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Form Validation Example</title>
</head>
<body>
    <form name="registrationForm">
        <input type="email" name="email" placeholder="Enter your email" required />
        <input type="submit" value="Register" />
    </form>
    <div id="message"></div>

    <script>
        const form = document.forms['registrationForm'];
        const email = form.elements['email'];

        form.onsubmit = function(event) {
            // Note: HTML5 email validation is basic and often supplemented by custom regex or libraries for production.
            // It may incorrectly accept incomplete addresses like 'w3docs@gmail'.
            if (!email.checkValidity()) {
                document.getElementById('message').textContent = "Please enter a valid email address.";
                event.preventDefault();
                return;
            }
            document.getElementById('message').textContent = "Registration successful!";
            event.preventDefault(); // Prevents actual form submission
        }
    </script>
</body>
</html>
Probier es selbst »

In diesem Skript validiert das Formular die E-Mail-Eingabe beim Absenden. Es zeigt eine Meldung an, ob die Registrierung erfolgreich war oder ob ein Fehler vorliegt — alles ohne Daten an einen Server zu senden. Dieses Beispiel verdeutlicht auch eine Einschränkung der HTML5-E-Mail-Validierung, die korrekte Domain-Formate nicht vollständig sicherstellt.

Auf input- und change-Events reagieren

Zwei Events decken die meisten Formularinteraktionen ab:

  • input wird bei jedem Tastenanschlag oder Wertewechsel ausgelöst — ideal für Live-Vorschauen, Zeichenzähler und Echtzeit-Validierung während der Eingabe.
  • change wird erst ausgelöst, wenn der Benutzer eine Änderung abschließt: wenn ein Textfeld nach der Bearbeitung den Fokus verliert oder wenn eine Checkbox, ein Radiobutton oder ein <select> umgeschaltet wird. Zu verwenden, wenn das Reagieren auf jeden Tastenanschlag unnötig wäre.
search.addEventListener('input', () => console.log(search.value)); // every keystroke
country.addEventListener('change', () => console.log(country.value)); // on selection

Das nächste Beispiel verwendet input, um während der Eingabe des Benutzers eine Live-Zeichenanzahl anzuzeigen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Input Event Example</title>
</head>
<body>
  <form name="bioForm">
    <textarea name="bio" maxlength="100" placeholder="Tell us about yourself"></textarea>
  </form>
  <div id="counter">0 / 100</div>

  <script>
    const bio = document.forms.bioForm.elements.bio;
    const counter = document.getElementById('counter');
    bio.addEventListener('input', function () {
      counter.textContent = bio.value.length + ' / 100';
    });
  </script>
</body>
</html>

Für die tieferen Mechanismen der Formularübermittlung — einschließlich des Unterschieds zwischen dem submit-Event und der Methode form.submit() — siehe Formulare: Event und Methode submit.

Formularmethoden: submit(), reset() und focus()

Formulare und Steuerelemente bieten auch imperative Methoden:

  • form.submit() sendet das Formular programmatisch. Wichtig zu wissen: Es löst das submit-Event nicht aus, sodass jede an dieses Event gebundene Validierung übersprungen wird. form.requestSubmit() sollte bevorzugt werden, wenn Validierung und das Event ausgeführt werden sollen.
  • form.reset() setzt alle Steuerelemente auf ihre Ausgangswerte zurück.
  • element.focus() verschiebt den Tastaturcursor zu einem Steuerelement — ideal zum Hervorheben des ersten ungültigen Felds. Das Gegenstück ist blur(). Weitere Details unter Fokussieren: focus / blur.
const form = document.forms.signup;
if (!form.email.value) {
  form.email.focus();   // send the user straight to the empty field
} else {
  form.requestSubmit(); // submit AND run the submit event + validation
}
form.reset();           // clear the form back to defaults

Formular-Events verarbeiten

So kann man Formular-Events dynamisch verarbeiten:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Events Example</title>
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center">
      <form
        style="display: flex; flex-direction: column; gap: 5px"
        name="contactForm"
      >
        <input type="text" name="fullName" placeholder="Full Name" required />
        <textarea name="message" placeholder="Your Message"></textarea>
        <input type="submit" value="Send" />
      </form>
    </div>
    <div
      style="display: flex; justify-content: center; align-items: center"
      id="confirmation"
    ></div>

    <script>
      const form = document.forms["contactForm"];

      form.onsubmit = function (event) {
        const name = form.elements["fullName"].value;
        const message = form.elements["message"].value;
        document.getElementById("confirmation").textContent =
          "Thank you, " + name + ", we received your message!";
        event.preventDefault(); // Prevents form from submitting to a server
      };
    </script>
  </body>
</html>
Probier es selbst »

Dieses Beispiel gibt dem Benutzer sofortiges Feedback, indem beim Absenden des Formulars eine Bestätigungsmeldung angezeigt wird. Es zeigt anschaulich, wie JavaScript Formular-Events verwalten kann, um die Interaktion ohne Serverkommunikation zu verbessern.

Fazit

Die Beherrschung der JavaScript-Formulareigenschaften und -methoden verbessert die Funktionalität und die Benutzerinteraktion von Webanwendungen. Formulare werden über document.forms erreicht, ihre Steuerelemente werden per Namen mit form.elements angesprochen, der Zustand wird mit der richtigen Eigenschaft gelesen (value, checked, selectedIndex), auf input- und change-Events wird reagiert und das Formular wird mit submit(), reset() und focus() gesteuert.

Für eine Vertiefung empfehlen sich diese verwandten Kapitel:

Übungen

Übung
Welche der folgenden Aussagen über JavaScript-Formulare und ihre Methoden sind korrekt?
Welche der folgenden Aussagen über JavaScript-Formulare und ihre Methoden sind korrekt?
Was this page helpful?