Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Grundlagen der Formularerstellung in HTML | HTML-Formulare und Benutzereingaben
Ultimatives HTML

bookGrundlagen der Formularerstellung in HTML

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 wird ein Beispiel für ein einfaches Formular vorgestellt:

Note
Hinweis

Alle Beispiele enthalten das Attribut onsubmit="return false", um das Standardverhalten der Formularübermittlung zu verhindern. So bleibt der Fokus auf dem Verständnis der Formularerstellung und der Attribute.

index.html

index.html

copy

Erläuterung der form-Attribute:

  • name identifiziert das Formular sowohl für Client als auch Server. Es darf Buchstaben, Zahlen, Unterstriche und Bindestriche enthalten, aber keine Leerzeichen;
  • autocomplete steuert, ob der Browser Formularfelder automatisch ausfüllen kann (on oder off). Kann auf das Formular oder einzelne Eingabefelder angewendet werden;
  • novalidate deaktiviert die integrierte Browser-Validierung, nützlich, wenn die Validierung manuell mit JavaScript erfolgt.

Übersicht der Kindelemente

Innerhalb eines <form>-Elements werden verschiedene Elemente verwendet, die dessen Funktionalität bestimmen. <input> ermöglicht die Eingabe von Daten wie Text, Zahlen, E-Mails und Passwörtern. Im Beispiel verwenden die Felder type="email" und type="password". <label> liefert beschreibenden Text für Eingabefelder und verbessert die Struktur sowie die Zugänglichkeit des Formulars. <button type="submit"> sendet die Formulardaten ab. Standardmäßig wird dadurch die Seite neu geladen, dieses Verhalten kann jedoch mit JavaScript überschrieben werden.

question mark

Welches HTML-Element wird verwendet, um eine Absende-Schaltfläche für ein Formular zu erstellen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookGrundlagen der Formularerstellung in HTML

Swipe um das Menü anzuzeigen

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 wird ein Beispiel für ein einfaches Formular vorgestellt:

Note
Hinweis

Alle Beispiele enthalten das Attribut onsubmit="return false", um das Standardverhalten der Formularübermittlung zu verhindern. So bleibt der Fokus auf dem Verständnis der Formularerstellung und der Attribute.

index.html

index.html

copy

Erläuterung der form-Attribute:

  • name identifiziert das Formular sowohl für Client als auch Server. Es darf Buchstaben, Zahlen, Unterstriche und Bindestriche enthalten, aber keine Leerzeichen;
  • autocomplete steuert, ob der Browser Formularfelder automatisch ausfüllen kann (on oder off). Kann auf das Formular oder einzelne Eingabefelder angewendet werden;
  • novalidate deaktiviert die integrierte Browser-Validierung, nützlich, wenn die Validierung manuell mit JavaScript erfolgt.

Übersicht der Kindelemente

Innerhalb eines <form>-Elements werden verschiedene Elemente verwendet, die dessen Funktionalität bestimmen. <input> ermöglicht die Eingabe von Daten wie Text, Zahlen, E-Mails und Passwörtern. Im Beispiel verwenden die Felder type="email" und type="password". <label> liefert beschreibenden Text für Eingabefelder und verbessert die Struktur sowie die Zugänglichkeit des Formulars. <button type="submit"> sendet die Formulardaten ab. Standardmäßig wird dadurch die Seite neu geladen, dieses Verhalten kann jedoch mit JavaScript überschrieben werden.

question mark

Welches HTML-Element wird verwendet, um eine Absende-Schaltfläche für ein Formular zu erstellen?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2
some-alt