Das HTML-Element <form> ist ein grundlegender Baustein zur Erstellung interaktiver Formulare auf einer Webseite. Es dient als Container für alle Formularelemente. Im Folgenden sehen wir ein Beispiel für ein einfaches Formular:

Hinweis

Alle Beispiele enthalten das Attribut onsubmit="return false", um das standardmäßige Absendeverhalten des Formulars zu verhindern. So bleibt der Fokus auf dem Verständnis der Formularerstellung und der Attribute.

Erläuterung der form-Attribute:

• name stellt eine eindeutige Kennung für das Formular auf einer Webseite bereit. Sowohl der Server als auch der Client verwenden diese Kennung zur Verarbeitung der Formulardaten. Der Formularname darf Zahlen, Unterstriche, Bindestriche und Zeichen des englischen Alphabets enthalten, jedoch keine Leerzeichen;

• autocomplete legt fest, ob Webbrowser Formularfelder automatisch ausfüllen können. Es kann auf "on" oder "off" gesetzt und auf einzelne Formularelemente angewendet werden;

• novalidate gibt an, dass Browser keine Validierung der Formularfelder durchführen sollen. Dies ist nützlich, wenn die Validierung manuell mit JavaScript erfolgen soll;

• method legt die HTTP-Methode fest, mit der die Formulardaten an den Server gesendet werden. Die beiden gebräuchlichsten Methoden sind GET und POST. Dieses Thema wird im JavaScript-Kurs ausführlich behandelt.

Übersicht über Kindelemente innerhalb eines Formulars

Im form-Element befinden sich verschiedene Kindelemente, die für die Funktionalität des Formulars unerlässlich sind. Das input-Element ermöglicht es Benutzern, unterschiedliche Datentypen wie Text, Zahlen und Daten einzugeben. In diesem Beispiel wird type="email" für das E-Mail-Feld und type="password" für das Passwortfeld verwendet. Das label-Element strukturiert das Formular und bietet beschreibenden Text für Eingabefelder, um den Benutzern deren Zweck zu verdeutlichen. Das Button-Element mit type="submit" dient dazu, die Formulardaten beim Anklicken an den Server zu senden. Standardmäßig wird beim Absenden des Formulars die Webseite neu geladen, dieses Verhalten kann jedoch mit JavaScript angepasst werden.