Formulare in HTML sind eine der wichtigsten Möglichkeiten, um Daten von Benutzern zu sammeln. Du kennst Formulare sicher aus dem Alltag – zum Beispiel, wenn du dich irgendwo registrierst, ein Kontaktformular ausfüllst oder etwas in einem Online-Shop bestellst. In HTML sind diese Formulare der Grundstein für solche Funktionen, aber sie können von HTML allein nicht verarbeitet werden. Stattdessen liefern sie eine Struktur, die von anderen Technologien (wie JavaScript, PHP oder ähnlichem) verwendet wird, um die Daten zu speichern oder weiterzuverarbeiten.

Was ist ein Formular überhaupt?

Ein Formular in HTML ist im Grunde ein Bereich auf einer Webseite, in dem der Benutzer Daten eingeben oder auswählen kann. Diese Eingaben können dann an eine andere Webseite oder ein Programm gesendet werden, das die Informationen verarbeitet. Zum Beispiel:

• Eingeben von Namen und E-Mail-Adressen
• Auswahl von Optionen, wie bei Umfragen
• Anklicken von Schaltflächen (die in HTML „Buttons“ genannt werden), um das Formular abzusenden

Da HTML nur dafür sorgt, dass ein solches Formular überhaupt angezeigt wird, ist es wichtig zu verstehen, dass es immer zusätzliche Techniken benötigt, um die eingegebenen Daten tatsächlich zu nutzen.

Die Bausteine von Formularen

Formulare bestehen aus verschiedenen „Bausteinen“, die den Nutzern die Eingabe oder Auswahl von Informationen ermöglichen. Diese Bausteine bezeichnet man als „Felder“. Schauen wir uns die wichtigsten Arten von Formularfeldern an, die in HTML5 verwendet werden können:

1. Texteingabefelder

Die meistgenutzten Felder für Formulare. Diese ermöglichen es dem Nutzer, Text einzugeben. Es gibt verschiedene Arten:

• Einzeilige Texteingabe: Zum Beispiel für Namen oder E-Mail-Adressen.
• Mehrzeilige Texteingabe: Zum Beispiel für Nachrichten, wie in einem Kontaktformular.

2. Checkboxen

Checkboxen sind kleine Kästchen, die angeklickt werden können, um sie zu markieren (oder „auszuwählen“). Damit können Nutzer mehrere Optionen gleichzeitig auswählen. Ein typisches Beispiel wäre:

• „Ich akzeptiere die Datenschutzbestimmungen“ (nur eine Checkbox)
• „Wählen Sie Ihre Interessengebiete“ (mehrere Checkboxen, bei denen du beliebig viele auswählen kannst).

3. Radiobuttons

Radiobuttons sehen ähnlich aus wie Checkboxen, funktionieren aber ein bisschen anders. Hier kann der Nutzer nur eine einzige Option aus einer Gruppe auswählen. Sie eignen sich zum Beispiel für Fragen wie: „Welches ist dein Geschlecht? (Option: männlich / weiblich / divers)“.

4. Dropdown-Menüs (Auswahllisten)

Dies ist eine Liste von Optionen, die zunächst versteckt ist und erst sichtbar wird, wenn der Nutzer darauf klickt. Ein typisches Beispiel wäre die Auswahl eines Landes aus einer langen Liste.

5. Schaltflächen

In HTML werden Schaltflächen als „Buttons“ bezeichnet. Diese sind essenziell, um Formulare zu senden oder Aktionen auszulösen. Es gibt verschiedene Arten von Buttons:

• Ein Submit-Button („Absenden“): Mit diesem Button wird das Formular und seine Daten an den Server gesendet.
• Ein Reset-Button („Zurücksetzen“): Damit kann der Nutzer alle Eingaben im Formular wieder löschen.
• Weitere Buttons können für spezielle Aktionen programmiert werden.

6. Passwortfelder

Diese Felder funktionieren wie Texteingabefelder, aber die Eingabe wird nicht als Klartext angezeigt. Stattdessen sieht man nur Punkte oder Sterne („****“). Sie werden für Passwörter verwendet, um diese vor anderen zu verbergen.

7. Zahleneingabefelder

Damit kann der Benutzer lediglich Zahlen eingeben. Das ist praktisch, um sicherzustellen, dass nur gültige Informationen eingegeben werden, wie zum Beispiel eine Telefonnummer oder eine Anzahl.

8. Datumsfelder

HTML5 ermöglicht es, Felder zu erstellen, mit denen Benutzer ein Datum auswählen können. Oft wird dabei ein Kalender angezeigt, aus dem ein Datum angeklickt werden kann.

9. Hochladefelder

Mit diesen Feldern kann der Benutzer Dateien von seinem Computer auswählen und hochladen. Das ist z. B. nützlich, um ein Lebenslauf hochzuladen oder ein Bild zu einer Bewerbung hinzuzufügen.

10. Felder für Farben

HTML5 bietet spezielle Felder an, bei denen der Nutzer eine Farbe aus einer Farbtabelle auswählen kann. Damit könnte man z. B. eine Lieblingsfarbe angeben.

11. Schieberegler (Slider)

Hiermit kann der Benutzer Werte innerhalb eines bestimmten Bereichs angeben, indem er einen Regler verschiebt. Ein Anwendungsfall wäre, die Lautstärke von Videos zu steuern.

12. Ausgeblendete Felder

Diese Felder sind für den Benutzer auf der Webseite nicht direkt sichtbar. Sie werden verwendet, um Daten zu speichern, die im Hintergrund wichtig sind (z. B. eine ID). Der Nutzer bemerkt solche Felder nicht.

HTML kann keine Formulare verarbeiten

Ein ganz wichtiger Punkt bei Formularen in HTML ist: HTML alleine kann die eingegebenen Daten nicht verarbeiten. Das bedeutet, dass die Webseite mit Technologien wie JavaScript, PHP oder ähnlichem arbeiten muss, um z. B. die Daten irgendwo zu speichern, an eine Datenbank zu übergeben oder eine E-Mail zu schicken.

Wenn man auf den „Absenden“-Button (Submit) klickt, werden die Daten entweder:

1. An eine andere Webseite oder einen Server geschickt, der die Daten verarbeitet (z. B. speichert oder überprüft).
2. Mit JavaScript direkt auf der Webseite bearbeitet, z. B. um dem Benutzer eine direkte Rückmeldung zu geben, wenn er etwas falsch ausgefüllt hat.

Was passiert mit den Daten?

Nach dem Absenden des Formulars kann der Server:

• Die Daten speichern (z. B. in einer Datenbank).
• Die Daten überprüfen (z. B. ob die E-Mail-Adresse korrekt eingegeben wurde oder ob das Passwort lang genug ist).
• Dir eine Antwort zurückschicken (Zum Beispiel: „Danke für deine Nachricht!“ oder „Passwort ist falsch“).
• Bestimmte Aktionen ausführen, wie das Versenden einer E-Mail.

Ohne eine solche serverseitige Verarbeitung würde ein Formular nur dazu da sein, Daten einzugeben, die dann im „Nirgendwo“ landen.

Barrierefreiheit und Nutzerfreundlichkeit

HTML5 hat viele Verbesserungen speziell für Formulare eingeführt, um sie einfacher verwendbar und barrierefrei zu machen. Es gibt Felder und Funktionen, die automatisch helfen:

• Zum Beispiel wird ein ungültiges Datum oder eine falsche E-Mail-Adresse automatisch erkannt, und der Browser zeigt eine Fehlermeldung.
• Für Menschen mit Einschränkungen, wie etwa Sehbehinderungen, können zusätzliche Beschreibungen eingebaut werden. So wissen Screenreader immer, was der Nutzer eingeben oder auswählen soll.

Zusammenfassung

Formulare in HTML5 bieten eine riesige Auswahl, um Nutzern die Eingabe von Daten zu ermöglichen. Es gibt Texteingabefelder, Kontrollkästchen (Checkboxen), Schaltflächen, Datumsfelder und vieles mehr, um für jede Art von Daten das passende Feld zu bieten. HTML selbst dient dabei nur der Erstellung der Struktur und des Designs der Formulare – die eigentliche Verarbeitung der eingegebenen Daten erfolgt immer durch andere Technologien wie JavaScript oder serverseitige Programmiersprachen.

Formulare sind die Grundlage für viele wichtige Funktionen im Internet, wie Kontaktformulare, Bestellungen oder Benutzerregistrierungen – und mit HTML5 kannst du sie noch besser und moderner gestalten!