Erstelle dein erstes HTML-Formular

In diesem Tutorial lernst du, wie du dein erstes einfaches Formular in HTML erstellst. Formulare sind ein essenzieller Bestandteil von Webanwendungen und ermöglichen es Benutzern, Informationen einzugeben und an einen Server zu senden. In diesem Schritt-für-Schritt-Guide wirst du die grundlegende Struktur eines HTML-Formulars kennenlernen und verstehen, wie die verschiedenen Elemente zusammenarbeiten, um Daten zu übertragen.

Wichtigste Erkenntnisse

• Ein HTML-Formular wird durch den <form>-Tag definiert.
• Die Attribute action und method bestimmen, wohin die Daten gesendet werden und welche Methode verwendet wird.
• Die Formularfelder werden normalerweise durch <input>, <label> und <button> definiert.
• Daten können entweder über GET oder POST an den Server gesendet werden.

Schritt-für-Schritt-Anleitung

1. HTML-Grundgerüst anlegen

Zuerst benötigst du ein einfaches HTML-Dokument als Grundgerüst. Stelle sicher, dass du die grundlegende Struktur eines HTML-Dokuments hast:

2. Form-Tag hinzufügen

Der nächste Schritt besteht darin, das Formular zu definieren. Du fügst den -Tag hinzu und benötigst die Attribute action und method. Hier ist ein einfaches Beispiel, wo action die URL angibt, an die die Daten gesendet werden, und method auf GET gesetzt ist, um die Daten über die URL zu übertragen.

3. Label und Input-Feld erstellen

Im Formular möchtest du ein beschriftetes Eingabefeld erstellen. Dazu verwendest du den -Tag für die Beschriftung und den -Tag für das eigentliche Eingabefeld. Achte darauf, dass das for-Attribut des Labels mit dem id des Eingabefeldes übereinstimmt.

4. Submit-Button hinzufügen

Um die Daten des Formulars zu senden, benötigst du einen Button. Dieser wird durch den -Tag realisiert und sollte den Typ submit haben, damit das Formular beim Klicken abgeschickt wird

5. Testen des Formulars

Nachdem du das Formular erstellt hast, ist es an der Zeit, es im Browser zu testen. Gib ein Beispiel in das Eingabefeld ein und klicke auf den Submit-Button. Du solltest sehen, dass beim Absenden des Formulars die eingegebenen Daten über die URL an die angegebene action gesendet werden.

6. Änderungen an den Input-Attributen

Um zu sehen, wie sich die Eingabefelder verändern, kannst du die Attribute des -Tags anpassen. Ändere zum Beispiel das name-Attribut, um die übermittelten Daten zu differenzieren. Ein Beispiel wäre, den Namen des Eingabefeldes von name zu first name zu ändern.

7. Datenübertragung und Request-Typ

Bevor du weitere Tests machst, ist es wichtig zu wissen, dass die Methode GET die Daten in der URL sendet, während POST die Daten im Body des HTTP-Requests sendet. Du kannst den Request-Typ ändern, indem du das method-Attribut im -Tag anpasst.

8. Serverreaktion simulieren

Da du beim Testen deines Formulars wahrscheinlich keinen echten Server zur Verfügung hast, kannst du die action-URL anpassen, um eine andere HTML-Seite zu simulieren, zu der die Benutzer nach dem Absenden des Formulars weitergeleitet werden. Erstelle eine neue HTML-Datei, die z.B. eine Dankesseite enthält.

9. Fehlerbehebung und Debugging

Wenn beim Absenden des Formulars Fehler auftreten, überprüfe die Network-Tools des Browsers. Dort siehst du, ob das Formular erfolgreich gesendet wurde und welche Daten übermittelt werden. Achte auch auf mögliche 404-Fehler, die anzeigen, dass die Ziel-URL nicht gefunden wurde.

10. Abschluss und Ausblick

Jetzt hast du ein grundlegendes Verständnis für die Erstellung von HTML-Formularen. Du kannst diese Technik erweitern, um komplexere Formulare zu erstellen, die verschiedene Eingabetypen und Validierungen enthalten. Im nächsten Tutorial wirst du lernen, wie man mit JavaScript auf die Formulareingaben reagiert und asynchrone Datenübertragungen durchführt.

Zusammenfassung

In diesem Tutorial hast du die Struktur und die Funktionsweise deines ersten HTML-Formulars kennengelernt. Du weißt jetzt, wie man Eingabefelder, Labels und Buttons erstellt und wie die gesendeten Daten über die URL oder im Body eines POST-Requests übertragen werden.