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.
Häufig gestellte Fragen
Was ist der Unterschied zwischen GET und POST?GET überträgt Daten über die URL, während POST die Daten im Body des Requests sendet.
Was muss ich im action-Attribut angeben?Im action-Attribut gibst du die URL an, an die die Formulardaten gesendet werden sollen.
Wie kann ich sicherstellen, dass mein Formular funktioniert?Teste das Formular im Browser und überprüfe die Netzwerktools auf die gesendeten Daten.
Wie kann ich mehrere Eingabefelder in einem Formular erstellen?Füge weitere -Tags unter dem ersten -Tag ein und achte darauf, jedem ein eindeutiges name-Attribut zu geben.
Was passiert nach dem Absenden des Formulars?Wird ein GET-Request gesendet, lädt die Seite neu und die Daten erscheinen in der URL. Bei einem POST-Request hängt die Reaktion von demselben Server ab.
