Arbeiten mit Formularen in JavaScript

Arbeiten mit Formularen in JavaScript

Formulare sind ein zentraler Bestandteil moderner Webanwendungen: Sie ermöglichen es uns, Benutzereingaben zu erfassen, zu verarbeiten und an den Server zu senden. In diesem Artikel zeige ich Ihnen, wie Sie in JavaScript effizient mit Formularen arbeiten und unterschiedliche Zugriffs- und Bearbeitungsmöglichkeiten nutzen können.

Zugriff auf Formulare und Formularelemente

Angenommen, unser HTML-Dokument enthält ein Formular mit dem Namen „form1“ und ein Texteingabefeld namens „firstname“. Es gibt mehrere Möglichkeiten, auf dieses Feld zuzugreifen:

1. Über die collection "forms":
     document.forms['form1'].firstname.value
2. Direkter Zugriff auf das Formular:
     document.form1.firstname.value
   
     Dieser Ansatz ist kompakter und funktioniert, wenn der Formularname eindeutig ist.
3. Zugriff über den Index:
     document.forms[0].firstname.value
     Die Indexierung der Formulare beginnt bei 0. Ist nur ein Formular im Dokument vorhanden, hat es den Index 0.

Sollten Sie ein bestimmtes Formularelement unabhängig davon ansprechen wollen, ob es innerhalb eines Formulars liegt oder nicht, können Sie auch die Methode getElementById() verwenden:
  document.getElementById("firstname").value

Ebenso lassen sich Formularelemente über die Collection elements abrufen:
  document.forms["form1"].elements["firstname"].value
  document.forms["form1"].elements[0].value
  document.forms[0].elements[0].value

Verwenden Sie den Ansatz, der Ihnen am besten gefällt oder am passendsten zu Ihrer Anwendung ist.

Eigenschaften und Methoden von Formularobjekten

Ein Formularobjekt bietet einige nützliche Eigenschaften, die Ihnen den Zugriff und die Verwaltung erleichtern:

• length – die Anzahl der Elemente im Formular
• action – die URL, an die das Formular gesendet wird
• elements – eine Referenz auf die Collection der enthaltenen Elemente
• encoding – der MIME-Typ der zu übertragenden Daten
• method – die Übertragungsmethode (z. B. GET oder POST)
• enctype – der Kodierungstyp der Formular-Daten
• name – der Name des Formulars
• target – der Name des Frames, in den das Dokument geladen wird

Zudem unterstützt das Formularobjekt zwei grundlegende Methoden:

• submit() – löst das Senden des Formulars an den Webserver aus
• reset() – setzt das Formular zurück (alle Felder werden auf ihren Ausgangswert zurückgesetzt)

Die zugehörigen Ereignisse onsubmit und onreset können genutzt werden, um zusätzliche Aktionen auszuführen, wenn das Formular gesendet oder zurückgesetzt wird.

Arbeiten mit Input-Feldern und Texteingaben

Schauen wir uns nun die grundlegenden Formularelemente an:

• Das Textfeld ()
• Das Passwortfeld ()

Diese beiden Elemente besitzen dieselben grundlegenden Eigenschaften, Methoden und Ereignisse:

Eigenschaften:
 • value – der aktuelle Wert des Elements
 • defaultValue – der initial gesetzte Wert
 • disabled – bestimmt, ob das Feld inaktiv ist (true) oder nicht (false)
 • form – eine Referenz zur übergeordneten Form
 • maxLength – die maximale Anzahl an Zeichen, die eingegeben werden können
 • name – der Name des Elements
 • readOnly – legt fest, ob der Inhalt bearbeitbar ist (false) oder nur lesbar (true)
 • type – der Typ des Formularelements

Methoden:
 • blur() – entfernt den Fokus vom aktuellen Element (onblur-Ereignis)
 • focus() – setzt den Fokus auf das aktuelle Element (onfocus-Ereignis)
 • select() – hebt den Text im Feld hervor

Das Ereignis onchange wird ausgelöst, wenn der Inhalt des Feldes verändert und der Fokus gewechselt wird.

Das Textarea-Element

Anders als bei einfachen Input-Feldern erlaubt das -Element die Eingabe von mehrzeiligem Text. Die meisten Eigenschaften und Methoden ähneln denen eines Eingabefeldes, jedoch gibt es einige Besonderheiten:

• Es gibt kein maxLength-Attribut (obwohl manche Browser dies unterstützen)
• Das Attribut wrap steuert den Zeilenumbruch. Es kann folgenden Werte annehmen:
  off: Kein Zeilenumbruch
  physical: Zeilenumbruch sowohl auf dem Bildschirm als auch in den übertragenen Daten
  virtual: Zeilenumbruch nur auf dem Bildschirm, nicht jedoch bei der Datenübertragung</p>

Fazit

Das Arbeiten mit Formularen in JavaScript bietet vielfältige Möglichkeiten, um Benutzereingaben effizient zu erfassen und zu verarbeiten. Ob über direktes Ansprechen des Formulars, mittels Index oder mit getElementById() – Sie haben die Wahl der Methode, je nach Ihren individuellen Anforderungen.

Zudem ermöglichen Eigenschaften wie length, action, elements und Methoden wie submit() und reset() eine präzise Kontrolle über das Formularverhalten.

Beim Umgang mit Input-Feldern und Textareas ist es wichtig, die jeweiligen Besonderheiten zu kennen, um eine optimale Benutzererfahrung zu realisieren. Nutzen Sie dieses Wissen, um Ihre Webanwendungen interaktiver und benutzerfreundlicher zu gestalten.