.webp)
Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingaben werden meistens zur Verarbeitung an einen Server gesendet.
Erklärung
HTML-Formulare lassen sich ganz einfach als Tag definieren:
Besuche die App, um alle Inhalte zu sehen!
Damit ein HTML-Formular sinnvoll eingesetzt werden kann, verfügt es über ein paar nützliche Attribute.
Wichtige Attribute
Ein wichtiges Attribut ist action. Das action-Attribut hilft uns den Empfänger zu adressieren. Einfacher gesagt, das action-Attribut speichert den Wert des Empfängers. Ein möglicher Empfänger ist zum Beispiel ein Server oder eine E-Mail-Adresse. Vor der E-Mail-Adresse ist noch der E-Mail-Adressenzusatz mailto: notwendig.
Besuche die App, um alle Inhalte zu sehen!
Ein weiteres wichtiges Attribut ist method. Das method-Attribut gibt an, wie die Formulardaten an den Server, also an die im action-Attribut angegebene Adresse, geschickt werden sollen. Hierfür unterscheidet man unteranderem zwischen get und post.
get | Hängt die Formulardaten an die URL mittels name und value Paaren an. Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! |
|---|---|
post | Sendet die Formulardaten an den Server. Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! |
Jetzt sind die Formalitäten des Formulars (Achtung: Wortwitz!) geklärt, jedoch müssen natürlich noch Felder her, die ein Formular erst so richtig nützlich machen.
Formularelemente
Eines der am häufigsten verwendeten Formularelemente ist das input-Element. Durch das input-Tag können Daten eingegeben oder ausgewählt werden. Mit Hilfe des type-Attributs kann angegeben werden, welche Daten eingegeben werden sollen.
Besuche die App, um alle Inhalte zu sehen!
ACHTUNG: Zwischen den input-Tags darf KEIN Inhalt sein. Deshalb wird es auch nicht geschlossen!
Das value-Attribut kann für verschiedene input-Elemente verschiedene Aufgaben übernehmen, zum Beispiel:
Besuche die App, um alle Inhalte zu sehen!
Das name-Attribut gibt den einzelenen Elementen einen Namen. Das ist vorallem dann sinnvoll, wenn man die Elemente mit ihrem Namen ansprechen möchte. Es ist auch möglich, dass mehrere Elemente denselben Namen haben.
Besuche die App, um alle Inhalte zu sehen!
Es gibt natürlich noch zahlreiche weitere Formularelemente neben dem input-Element. Eine gute Quelle dafür ist w3schools
Beispiel
Beispiel Anmeldeseite:
Besuche die App, um alle Inhalte zu sehen!
Das Beispiel soll euch nur zeigen, wie ein Formular aussehen kann und schickt natürlich keine Daten weiter, da beispiel.de/anmeldung nicht existiert.
.avif)
.svg)
